CSS代码是否合理？是否优化？

介绍 CSS 优先权：理解并优化你的样式规则

你是否曾经遇到过 CSS 样式不生效的问题？这往往是因为 CSS 的优先权规则在起作用。今天，让我们一起深入了解这个常常让人困惑的规则。

在 CSS 中，规则的优先权是通过一个被称为 Specificity（特异性）的概念来定义的。CSS 通过计算每个选择器的 Specificity 值来确定哪个样式规则应该被应用。这是一种确保设计师能够精确控制样式的机制。当你在面对复杂的样式冲突时，理解并合理利用 Specificity 是关键。

Specificity 的计算规则很简单：

内联样式（元素的 style 属性）的特异性值为 1,0,0,0。

每个 ID 选择器（例如 myId）的特异性值为 0,1,0,0。

类选择器（例如 .myClass）、属性选择器（例如 [type="text"]）和伪类（例如 :hover）的特异性值为 0,0,1,0。

元素和伪元素选择器（例如 h1、::before）的特异性值为 0,0,0,1。其他选择器（如全局选择符 和子选择符 >）的特异性值增加较小。

所有这些选择器的 Specificity 值会逐位相加，从左到右进行比较。例如，如果一个选择器的 Specificity 值是 0,0,2,2，那么它将优先于另一个值为 0,0,1,3 的选择器。这就是 CSS 如何决定规则优先权的。带有 !important 声明的规则优先级更高。如果没有使用 !important，那么在具有相同 Specificity 值的情况下，CSS 会按照它们在源代码中出现的顺序决定哪个规则应该生效，这就是所谓的“后来者居上”原则。通过继承得到的样式属性不参与 specificity 的计算，其优先级低于其他所有规则。

让我们通过一个简单的例子来分析一下：假设你有两个样式规则分别应用于 h1 元素，一个是 h1 {color: red;}，另一个是 body h1 {color: green;}。由于 body h1 的 Specificity 值更高（0,0,0,2 对 0,0,0,1），所以绿色样式会生效。同样地，在 h2.grape {color: purple;} 和 h2 {color: silver;} 的比较中，由于 h2.grape 的 Specificity 值更高（0,0,1,1 对 0,0,0,1），紫色样式会生效。在 html > body table tr[id="totals"] td ul > li 和 lianswer 的比较中，尽管前者有更高的 Specificity 值（但由于包含多个元素选择器而增加），但由于 ID 选择器的优先级更高，所以 lianswer 的样式（颜色为 navy）会生效。这就是 CSS 优先权规则的魅力所在。理解了这些规则后，你就能更好地管理和优化你的 CSS 代码了。