各位观众老爷，晚上好！我是今天的主讲人，咱们今天聊点硬核的——CSS 的“特异性”。别怕，这玩意儿听起来吓人，其实就是 CSS 优先级的大 boss。掌握了它，你就能在样式大战中运筹帷幄，告别“样式覆盖覆盖再覆盖”的噩梦。
开场白：CSS 的世界，谁说了算？
话说，你写了一堆 CSS 样式，结果浏览器愣是不听你的，非要用它自己的，或者用别的 CSS 文件里的。这时候，你是不是想掀桌？别急，这锅不能全甩给浏览器，很可能是你没搞清楚 CSS 的“特异性”。
想象一下，CSS 就像一个民主社会，每个样式声明都有投票权。但不是一人一票，而是根据“特异性”来决定投票权重。权重高的，说了算！
第一幕：特异性是个啥？
简单来说，特异性就是浏览器用来判断哪个 CSS 规则应该应用的算法。它基于你选择器写的有多“具体”来给每个规则打分。分数越高，优先级越高，样式就越会被应用。
第二幕：特异性计算规则——“四个维度，层层递进”
特异性计算规则就像一个四维坐标系，每个维度代表一种选择器的类型，从高到低依次是：
- 内联样式 (Inline styles)： 直接写在 HTML 标签里的
style属性里的样式。 - ID 选择器 (ID selectors)：
#id这种选择器。 - 类选择器、属性选择器和伪类选择器 (Class selectors, attribute selectors, and pseudo-classes)：
.class,[attribute],:hover这种选择器。 - 元素选择器和伪元素选择器 (Element selectors and pseudo-elements)：
div,p,::before这种选择器。 - 通配符选择器和继承来的样式 (Universal selector and inherited styles)：
*和从父元素继承来的样式。
我们可以用 (a, b, c, d) 这样的元组来表示一个 CSS 规则的特异性，其中：
a代表内联样式的数量 (0 或 1)。b代表 ID 选择器的数量。c代表类选择器、属性选择器和伪类选择器的数量。d代表元素选择器和伪元素选择器的数量。
重要提示：
- 这个
(a, b, c, d)不是一个数学公式，不能直接加减乘除！它是按位比较的。 - 后面的维度只有在前一个维度相等的情况下才会比较。
- 通配符选择器
*和继承来的样式特异性都为(0, 0, 0, 0)，这意味着它们几乎垫底，除非没有其他更具体的规则。
举个栗子，我们来算算分：
| 选择器 | 特异性 | 说明 |
|---|---|---|
* |
(0, 0, 0, 0) |
通配符，啥都没选，最低！ |
p |
(0, 0, 0, 1) |
元素选择器，选了 p 标签。 |
.my-class |
(0, 0, 1, 0) |
类选择器，比元素选择器更具体。 |
p.my-class |
(0, 0, 1, 1) |
元素选择器 + 类选择器，更具体了。 |
#my-id |
(0, 1, 0, 0) |
ID 选择器，非常具体！ |
div#my-id |
(0, 1, 0, 1) |
元素选择器 + ID 选择器，更更具体了。 |
style="color: red;" |
(1, 0, 0, 0) |
内联样式，宇宙无敌的存在！（除了 !important）。 |
p:hover |
(0, 0, 1, 1) |
元素选择器 + 伪类选择器，鼠标悬停时生效。 |
p::first-line |
(0, 0, 0, 2) |
元素选择器 + 伪元素选择器，选中第一行。 |
html body div p |
(0, 0, 0, 4) |
多个元素选择器叠加，也很具体了。 |
.my-class[data-attribute="value"] |
(0, 0, 2, 0) |
类选择器 + 属性选择器，精准打击。 |
第三幕：特异性冲突解决——“后来者居上，权重说话”
如果多个 CSS 规则都匹配同一个元素，并且都设置了同一个属性，那么浏览器会按照以下顺序来解决冲突：
-
来源 (Origin)：
- 用户代理样式表 (浏览器默认样式)
- 用户样式表 (用户自定义样式，优先级高于浏览器默认样式)
- 作者样式表 (你的 CSS 文件，优先级高于用户样式表)
-
特异性 (Specificity)： 特异性高的规则胜出。
-
顺序 (Order)： 如果特异性相同，那么在 CSS 文件中后出现的规则胜出 (后来的覆盖前面的)。
第四幕：!important——“霸道总裁强制爱”
!important 是一个非常强大的声明，它可以直接提升一个 CSS 规则的优先级，使其凌驾于所有其他规则之上（除了来自同一来源且也使用了 !important 的规则）。
用法：
p {
color: red !important; /* 无论什么情况，p 标签的文字颜色都会变成红色 */
}警告：
!important虽好，但不要滥用！滥用!important会让你的 CSS 代码变得难以维护和调试。- 尽量只在必要的时候使用
!important，例如，覆盖一些你无法控制的第三方库的样式。 - 更好的方法是提高你的选择器的特异性，而不是依赖
!important。
第五幕：实战演练——“代码说话，胜过千言”
<!DOCTYPE html>
<html>
<head>
<title>CSS 特异性示例</title>
<style>
/* 规则 1：元素选择器 */
p {
color: blue;
}
/* 规则 2：类选择器 */
.my-paragraph {
color: green;
}
/* 规则 3：ID 选择器 */
#my-paragraph {
color: orange;
}
/* 规则 4：内联样式 */
</style>
</head>
<body>
<p>这是一个段落。</p>
<p class="my-paragraph">这是一个带有类名的段落。</p>
<p id="my-paragraph" class="my-paragraph">这是一个带有 ID 和类名的段落。</p>
<p id="my-paragraph" class="my-paragraph" style="color: red;">这是一个带有 ID、类名和内联样式的段落。</p>
</body>
</html>在这个例子中：
- 第一个段落只匹配规则 1，所以文字颜色是蓝色。
- 第二个段落匹配规则 1 和规则 2，但规则 2 的特异性更高，所以文字颜色是绿色。
- 第三个段落匹配规则 1、规则 2 和规则 3，但规则 3 的特异性更高，所以文字颜色是橙色。
- 第四个段落匹配所有规则，但内联样式的特异性最高，所以文字颜色是红色。
再来一个更复杂的例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS 特异性示例</title>
<style>
/* 规则 1 */
body #content .article p {
color: gray; /* (0, 1, 1, 4) */
}
/* 规则 2 */
#content p {
color: purple; /* (0, 1, 0, 1) */
}
/* 规则 3 */
.article p {
color: teal; /* (0, 0, 1, 2) */
}
/* 规则 4 */
p {
color: silver; /* (0, 0, 0, 1) */
}
</style>
</head>
<body>
<div id="content">
<div class="article">
<p>This is a paragraph.</p>
</div>
</div>
</body>
</html>在这个例子中，哪个规则会生效？
- 规则 1 的特异性是
(0, 1, 1, 4) - 规则 2 的特异性是
(0, 1, 0, 1) - 规则 3 的特异性是
(0, 0, 1, 2) - 规则 4 的特异性是
(0, 0, 0, 1)
规则 1 的特异性最高，所以段落的文字颜色是灰色。
第六幕：特异性的最佳实践——“优雅coding，告别混乱”
- 保持选择器简洁明了： 避免过度嵌套的选择器，尽量使用更简洁的选择器来提高代码的可读性和可维护性。
- 避免使用
!important： 尽量通过提高选择器的特异性来解决样式冲突，而不是依赖!important。 - 使用 CSS reset 或 normalize： 这可以消除不同浏览器之间的默认样式差异，使你的样式更加一致。
- 遵循 BEM (Block, Element, Modifier) 命名规范： BEM 可以帮助你编写更模块化、可重用的 CSS 代码，并降低特异性冲突的风险。
- 使用 CSS 预处理器 (如 Sass 或 Less)： CSS 预处理器可以让你使用变量、mixin 和嵌套等功能，从而编写更简洁、更易于维护的 CSS 代码。
- 使用 CSS Lint 工具： CSS Lint 工具可以帮助你检测 CSS 代码中的错误和潜在问题，包括特异性问题。
第七幕：常见问题解答——“解惑答疑，扫清障碍”
-
问：特异性是越多越好吗？
答：不是！过高的特异性会导致样式难以覆盖，增加代码的维护成本。尽量保持选择器的特异性适中。 -
问：我应该如何调试特异性问题？
答：可以使用浏览器的开发者工具来查看元素的样式来源和特异性。大多数浏览器都会显示哪些 CSS 规则应用于元素，以及它们的特异性。 -
问：内联样式真的无敌吗？
答：几乎无敌。只有来自同一来源且也使用了!important的规则才能覆盖内联样式。 -
问：为什么我的 CSS 样式不起作用？
答：首先检查选择器是否正确，然后检查特异性是否足够高，最后检查是否有其他 CSS 规则覆盖了你的样式。
结束语：掌握特异性，玩转 CSS
好了，今天的讲座就到这里。希望通过今天的讲解，大家对 CSS 的特异性有了更深入的了解。掌握了特异性，你就能更好地控制 CSS 样式，编写更清晰、更易于维护的代码。记住，优雅coding，告别混乱！
谢谢大家！ 下课！