CSS 中 a 标签为什么不能继承父类的颜色？

CSS 中 a 标签为什么不能继承父类的颜色？

嗯，我知道在这么好的环境下，问这么Low的问题太der，但是不弄明白心里痒痒，只能出此下策。
问题是这样的：

HTML：

<div>
  <span>文字</span>
  <a href="#">链接</a>
</div>

CSS：

div{ 
  color:red; 
}

问题出现了，为什么span标签继承了父类的颜色，链接就不能。
就是想知道为什么唯独链接不能，我直到直接设置a的颜色就行。

关注者

32

被浏览

8,853

关注问题写回答

​添加评论

​分享

​邀请回答

​

收起

8 个回答

默认排序 ​

知乎用户

美腿控 / 音乐狗 / Web 前端

23 人赞同了该回答

1、结论：由于CSS的层叠（cascading），a元素继承自div的样式（color:red）被浏览器的a元素的默认样式给覆盖了。

2、理由：
看图：
图一：

图二：

由以上两个图可以知道：
1、浏览器本身对 a元素有默认样式（user agent stylesheet）（图二），对 span元素没有默认样式（图一）
2、由于CSS的层叠，a元素red颜色继承自div（Inherited from div）被划掉了（图二）。
由此可以得到我上面书写的结论。

3、涉及到的知识点：

4、参考资料：
Cascade - CSS
《CSS权威指南》第三章

编辑于 2016-12-13

23 ​4 条评论

​分享

​收藏 ​感谢 收起

貘吃馍香

北京碎催，胡同串子，说话痞，圣母婊请勿近

2 人赞同了该回答

泻药
上头都答的差不多了啦。
如 @李力 所说

其实就是 A 的浏览器默认样式里有带有伪类。
其特异性值是 [0,0,1,1] (按CSS2的……3(广义的3……)又有不同)

（用户）直接设置 div 的是 [0,0,0,1] （其子A再继承），（导致A特异性值）比上面（浏览器默认样式直接设置）低，无法覆盖。

编辑于 2015-02-26

2 ​3 条评论

​分享

​收藏 ​感谢

依云

啊咧，一句话介绍不清楚的喵。

1 人赞同了该回答

因为浏览器默认给 a 设置了颜色，而 span 没有。

火狐开发者工具，在设置面板选中「查看器」下的「显示浏览器样式」，然后查看元素看看。

发布于 2015-02-25

1 ​添加评论

​分享

​收藏 ​感谢

知乎用户

wángwěi,只会打FPS游戏的软件工程师

Useragent Stylesheet
webkit: html.css in trunk/Source/WebCore/css
IE: Internet Explorer UA Style Sheets
Firefox: http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css

发布于 2015-02-26

0 ​添加评论

​分享

​收藏 ​感谢

mcZone

Web前端 / 数码爱好者 / 原声音乐粉

3 人赞同了该回答

浏览器本身对 a 标签有默认样式，是直接对 a 标签指定的
例如在我这 Google Chrome 浏览器里:

所以你没写任何样式，但是看到 a 标签应该是带下划线的，还可能是蓝的，链接访问过后可能是红的 ( :visited ) 。
从父级 div 继承下来的优先级没有选择器高，覆盖不到。

发布于 2015-02-25

3 ​添加评论

​分享

​收藏 ​感谢

任光辉

前端开发者

6 人赞同了该回答

原因就是楼上几位说的，不过为这点问题再给a单独设置颜色明显不科学。

可以让a的颜色默认继承父级，这样

a {
color: inherit;
}

编辑于 2015-02-26

6 ​4 条评论

​分享

​收藏 ​感谢

hhj187

1 人赞同了该回答

一句话你就明了：继承的特殊性是无，连0都不是。所以被用户代理覆盖了。

发布于 2016-05-13

1 ​2 条评论

​分享

​收藏 ​感谢

be verse

我最不忍看你背向我煮面

此问题在 stackoverflow 上有讨论：css - when will "a" tag not inherit color attribute of parent tag?

编辑于 2015-02-27

0 ​2 条评论

​分享

​收藏 ​感谢

写回答