CSS - 特异性

欢迎，亲爱的学生们，踏上CSS特异性的精彩之旅！作为你们友善的邻居电脑老师，拥有多年的经验，我非常激动地引导你们了解这个关键概念。如果你是编程新手，不用担心——我们将从基础开始，逐步深入。那么，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们一起跳进去吧！

CSS 特异性 - 选择器权重类别

想象CSS特异性就像是在选择器之间进行的人气竞赛。每个选择器都有自己的“权重”或重要性，权重最高的选择器赢得了设置元素样式的权利。这就像学校里的酷孩子一样——你越酷，你的影响力就越大！

选择器权重分为四个主要类别，从高到低：

1. 行内样式
2. ID
3. 类、属性和伪类
4. 元素和伪元素

让我们更详细地看看每一个。

CSS 特异性 - 每个选择器类型的分数

为了让事情更容易理解，我们可以给每个选择器类型分配分数。把它想象成一场游戏，每个选择器根据其重要性获得分数。以下是一个方便的表格供参考：

选择器类型	分数	示例
行内样式	1000	<p style="color: red;">
ID	100	#header
类、属性、伪类	10	.button, [type="text"], :hover
元素和伪元素	1	p, ::before

现在，让我们通过一些代码示例来看看这是如何工作的：

/* 特异性：1 */
p {
color: blue;
}

/* 特异性：10 */
.text {
color: red;
}

/* 特异性：100 */
#main-heading {
color: green;
}

在这个例子中，如果我们有一个元素如 <p id="main-heading" class="text">Hello, World!</p>，文本颜色将是绿色，因为ID选择器具有最高的特异性。

CSS 特异性 - 异常情况

现在，你可能在想，“但是老师，这些规则有例外吗？”好问题！确实有一个主要的例外：!important 声明。

当你将 !important 添加到属性时，它成为了最终的赢家，无论特异性如何。这就像在垄断游戏中使用“免狱卡”一样——明智地使用它！

p {
color: blue !important;
}

#main-heading {
color: green;
}

在这种情况下，尽管ID选择器具有更高的特异性，但 p 选择器上的 !important 规则将使文本颜色为蓝色。

CSS 特异性 - 处理问题

有时，你可能会发现自己陷入特异性的困境。别担心；这发生在我们最好的程序员身上！以下是一些处理特异性问题的技巧：

1. 除非绝对必要，否则避免使用 !important。
2. 尽可能使用类而不是ID。
3. 注意你的选择器结构，并尽量保持简单。
4. 如果你对自己的选择器权重不确定，可以使用特异性计算器。

CSS 特异性 - 需要记住的点

让我们回顾一些关于CSS特异性的关键点：

1. 特异性是根据选择器的组成部分计算的。
2. 行内样式总是具有最高的特异性（除非被 !important 覆盖）。
3. ID的特异性高于类，类的特异性高于元素。
4. 选择器越具体，其特异性越高。
5. 当特异性相同时，由声明顺序决定（更多关于这一点将在下一节介绍）。

CSS 特异性 - 相同特异性（后声明的胜出）

当两个选择器具有相同的特异性时，CSS文件中最后出现的选择器胜出。这就像在比赛中冲过终点线一样——最后一个跨过线的选手获得奖励！

.button {
background-color: blue;
}

.button {
background-color: red;
}

在这种情况下，按钮将是红色的，因为它是最后一个声明。

CSS 特异性 - 特异性层级（行内样式）

行内样式是特异性的重量级冠军。它们的特异性为1000，高于样式表中的任何选择器。例如：

<p style="color: red;" class="blue-text" id="green-text">我是什么颜色？</p>

#green-text {
color: green;
}

.blue-text {
color: blue;
}

在这种情况下，文本将是红色的，因为行内样式击败了ID和类选择器。

CSS 特异性 - 特异性层级（ID声明）

在行内样式之后，ID选择器是至高无上的。它们具有100的特异性，超过了类和元素。让我们看一个例子：

<p id="special-paragraph" class="normal-text">我是一个特殊的段落！</p>

#special-paragraph {
color: purple;
}

.normal-text {
color: black;
}

p {
color: blue;
}

在这里，文本将是紫色的，因为ID选择器在CSS规则中具有最高的特异性。

CSS 特异性 - 特异性层级（类声明）

类选择器在我们的层级中排在下一个，具有10的特异性。它们比元素选择器更具体，但不如ID选择器。例如：

<p class="highlight">这是一个突出显示的段落。</p>

.highlight {
background-color: yellow;
}

p {
background-color: white;
}

在这个例子中，段落将有黄色的背景，因为类选择器比元素选择器具有更高的特异性。

CSS 特异性 - 特异性层级（带有 !important 规则）

最后但同样重要的是，让我们讨论一下核选项：!important。这个声明覆盖了所有其他声明，无论它们的特异性如何。这就像在你的CSS牌组中有一张“王牌”。

p {
color: blue !important;
}

#special-paragraph {
color: red;
}

.highlight {
color: green;
}

如果我们将这些样式应用到一个段落中，它将是蓝色的，即使它有ID special-paragraph 或类 highlight，因为 !important 规则。

至此，亲爱的同学们！我们已经涵盖了CSS特异性的方方面面。记住，随着特异性的增强，责任也在增加。明智地使用你的新知识，愿你的样式总是具有特异性，你的选择器总是清晰！

Credits: Image by storyset