CSS：权威指南，第 5 版

第 4 章. 特异性、遗传和级联

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

第 2章和第 3章展示了文档结构和 CSS 选择器如何让你为元素应用各种样式。由于每个有效文档都会生成一个结构树，因此你可以根据元素的祖先、属性、同级元素等创建针对元素的选择器。结构树是选择器发挥作用的基础，也是 CSS 的一个同样重要的方面：继承的核心。

继承是一种 机制，通过这种机制，一些属性值可以从一个元素传递到后代元素。在确定哪些值应适用于某个元素时，用户代理不仅要考虑继承性，还要考虑声明的特殊性以及声明本身的来源。这个考虑过程就是所谓的级联。

我们将在本章中探讨这三种机制--特异性、继承和级联之间的相互关系。现在，后两者之间的区别可以这样概括：当我们写h1 {color: red; color: blue;} 时，<h1> 会因为级联而变成蓝色，而<h1> 内的任何<span> 也会因为继承而变成蓝色。

最重要的是，无论事情看起来多么抽象，都要坚持 Go！你的坚持会得到回报。

特殊性

通过第 2章和第 3章的学习，你已经知道可以通过多种方式选择元素。事实上，同一个元素往往可以通过两条或两条以上的规则来选择，每条规则都有自己的选择器。下面是三对规则。假设每一对规则都将匹配同一个元素：

h1 {color: red;}
body h1 {color: green;}

h2.grape {color: purple;}
h2 {color: silver;}

html > body table tr[id="totals"] td ul > li {color: maroon;}
li#answer {color: navy;}

由于配对元素一次只能是一种颜色，因此每对规则中只能有一条适用，也就是 "赢"。我们如何知道哪一个会赢呢？

答案就在每个选择器的特殊性中。对于每一条规则，用户代理（即网络浏览器）都会评估选择器的特异性，并将特异性附加到层叠层内具有优先权的规则中的每一条声明上。当一个元素有两个或更多相互冲突的属性声明时，具体程度最高的声明将胜出。

备注

这还不是冲突解决的全部内容，冲突解决的复杂程度远非一段文字所能涵盖。现在，我们只需记住，选择器的特异性只与共享相同起源和级联层的其他选择器进行比较。我们将在"级联 "中介绍这些术语以及更多内容。

选择器的特异性由选择器本身的组件决定。特异性值可以用三个部分来表示，比如：0,0,0 。选择器的实际特异性按以下方式确定：

• 对于选择器中给出的每个 ID 属性值，添加1,0,0 。

• 对于选择器中给出的每个类属性值、属性选择或伪类，添加0,1,0 。

• 为选择器中给出的每个元素和伪元素添加0,0,1 。

• 组合器对特异性没有任何贡献。

• 在:where() 伪类和通用选择器中列出的任何内容都会增加0,0,0 。（虽然它们不会对特异性权重产生任何影响，但与组合器不同，它们会匹配元素）。

• :is() 、:not() 或:has() 伪类的特异性等于其选择器列表参数中最特异的选择器的特异性。

例如，以下规则的选择器会产生指定的特性：

h1 {color: red;}                     /* specificity = 0,0,1 */
p em {color: purple;}                /* specificity = 0,0,2 */
.grape {color: purple;}              /* specificity = 0,1,0 */
*.bright ...