关于CSS特殊性的问题

问题代码如下:

HTML

<p>Hello,<span>CSS</span></p>

CSS

*{
    color:red;
}
p{
    color:green;
}

Result

clipboard.png
span标签内的文本颜色居然是红色,而不是绿色

问题:

为什么span标签没有继承p标签设置的{color:green;}属性呢?

阅读 5.3k
7 个回答

这就是俗称的通配选择器(*)造成的“继承失效”或“继承短路”。

在 CSS 的特殊性规则中,继承的声明根本没有任何特殊性,而使用通配选择器的声明具有0, 0, 0, 0特殊性。当二者冲突时,通配选择器胜出,导致继承失效。

正因为如此,一般不建议使用 (*)。

span是在p里边,但是span并没有指定样式(或者指定的样式中不包含color),整个过程式先计算的层叠的值,然后再考虑继承的值;这里的情况就是层叠的值是red,因为*是匹配所有元素的,所以显示的值就是red;根本轮不到继承自p的color值。

详细请看 http://blog.aijc.net/css/2014/08/04/CSS%20%E5%B1%82%E5%8F%A0%20Cascadi...

因为标签选择器的优先级是高于继承的优先级的。图片描述

由上面的浏览器的的调试模式可以知道span标签只是具有一个“*“规定的属性,而没有继承p标签的属性。

新手上路,请多包涵

如果没有span 就是绿色

但是span 是 * 的 red,所以被改颜色了

span有*修饰了,覆盖父级p

新手上路,请多包涵

我刚刚试了下,如果你把“*”改为“body”,那span就可以继承p标签的颜色了

推荐问题
宣传栏