css - 什么是“级联规则”？

Question

什么是级联规则？他们的意思是什么？我所知道的如下：

按重要性升序排列（从低到高）：

1. 用户代理声明
2. 用户正常声明
3. 作者正常声明
4. 作者重要声明
5. 用户重要声明

这些是CSS的规则吗？

Answer 1

该规范明确定义了级联。您在问题中包含的只是样式表规则的重要性。特定样式表中的规则在样式表中也具有特异性。对于具有相同特性的规则集，顺序很重要。

例如，在单个作者样式表中：

.link { color: red; }
.link:hover { color: green; }
.also-link { color: blue; }

对于具有 class 的元素link，它将具有color: red规则。如果将鼠标悬停在它上面，它将具有color: green. 如果一个元素有 class link also-link，那是color: blue因为.also-link规则是在后面声明的 .link，特异性是一样的。如果您将鼠标悬停在 上link also-link，那将是color: green因为它.link:hover具有更高的特异性，即使它在样式表中较早声明。