关于CSS特殊性的问题

Question

问题代码如下：

HTML

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

CSS

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

Result

span标签内的文本颜色居然是红色，而不是绿色

问题：

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

Answer 1

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

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

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

Answer 2

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...

Answer 3

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

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

Answer 4

css 优先级 * 就比 element 高
翻阅之前文章得到
http://segmentfault.com/a/1190000000453851

Answer 5

如果没有span 就是绿色

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

Answer 6

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

Answer 7

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