2.1.1 优先级的底层——继承_CSS选择器世界（第2版）-QQ阅读女生短篇网

上QQ阅读APP看书，第一时间看更新

关于继承，只需要记住这样一句话：被继承的CSS声明的优先级一定位于整个CSS世界的底层。

举个例子，HTML代码和CSS代码如下所示：

<p id="text">文字</p>
p::first-line { color: blue; }
#text { color: green !important; }

请问，文字颜色是blue还是green？

答案是blue！

这里其实比的不是选择器的优先级，而是继承与否。

color属性是一个可继承属性，无论<p>元素的color属性如何设置，对::first-line伪元素而言，其都是继承属性，优先级最低，因此，最终的颜色是blue。

另外，如果一个CSS属性同时继承自多个元素，则DOM层级越深的元素所继承的CSS优先级越高。

例如下面这个例子，请问<p>元素的文字颜色是red还是green？

<!DOCTYPE html>
<html>
<body>
  <p>文字颜色</p>
</body>
</html>
 
:root { color: red; }
body { color: green; }

没错，是green！

<body>元素的DOM层级比<html>深，因此，最终的文字颜色是body标签设置的属性值green。

以上就是继承在CSS声明的优先级中扮演的角色，还是很浅显易懂的。接下来介绍级联，做好心理准备，级联中所包含的优先级规则要复杂得多，当然，要学习的东西也更多。