CSS 特殊性

示例 1

示例 2

示例 3

CSS 特异性是应用于 CSS 选择器的一组规则，用于确定将哪种样式应用于元素。CSS 样式越具体，其获得的分值就越高，并且出现在元素样式中的可能性就越大。

理解 CSS 特殊性并利用它为您带来很多好处。

要了解为什么您的 CSS 样式未应用于元素，您必须首先对 CSS 特殊性有基本的了解。

只需在 CSS 样式上添加一个值就很容易了 !important，但这会导致 CSS 很快失控。

通过了解样式的应用方式，您可以确保呈现您想要显示的样式。

当我们不停下来思考样式表的架构，而是不考虑特殊性而随意使用大量 CSS 选择器时，CSS 很快就会变得难以控制。

对抗混乱的 CSS，并确保你的优先级规则按预期应用的一种方法是采用 CSS 命名架构。块元素修饰符(BEM) 是最常用的 CSS 命名架构之一。我们现在不会深入探讨命名架构，但它们可以帮助你确保样式不会相互覆盖。

通过充分利用 CSS 特殊性，您可以确保您的代码井然有序，并且您的选择器不会相互冲突。

代码库中充斥着各种覆盖的情况并不少见 !important。虽然 !important这能让你“忘掉所有其他样式，我要应用这个！！！”但当你需要更新样式却不知从何下手时，这可能会导致严重的问题。

CSS 特异性允许您以正确的方式添加必要的 CSS 来设置元素的样式。当您确切知道哪个选择器可以设置特定元素的样式时，可以更轻松地快速更改样式。此外，您可能会发现自己总体上编写的 CSS 代码更少，这有助于提高可维护性。

从高层次来看，你的 CSS 有三种特殊性：

• 通用选择器、组合器（>、+ 等）和否定伪类 :not()对 CSS 特异性没有影响；伪类内部定义的样式 :not()会受到影响。
• 内联样式（添加到 HTML 元素的样式）始终会覆盖外部样式表中声明的任何样式；这些通常不是好的做法，因为最好在一个地方定义所有样式。
• !important覆盖所有其他指定的样式；这是一种不好的做法，因为它会使 CSS 的调试变得更加困难。当两个冲突的样式都使用 !important 声明时，最明确的样式将生效。

在使用 CSS 框架（例如 Bootstrap）时，您可能会遇到无法使用 CSS 优先级覆盖原生样式的情况。在这种情况下，使用 CSS 优先级 !important并非坏习惯。

你可能会问自己：“CSS 特异性确实很棒，但我该如何确定哪种样式最具体呢？”我们使用四分类系统来赋予 CSS 选择器值。具有最具体值的选择器将获胜。

示例 1

假设我们有一个包含三个列表项的无序列表。该列表及其所有列表项都有类名。并且我们创建了两个不同的 CSS 选择器。哪一个更具体？

让我们分解一下 CSS 特殊性的计算。

示例 2

假设您正在设计一个导航元素，它具有以下 HTML 结构。

我们有两个样式，用于在鼠标悬停时更改导航列表项的颜色。我们想将第二个列表项在鼠标悬停时的颜色改为粉色。但是它没有按预期工作。

为了将列表项二的鼠标悬停颜色改为粉色，我们需要一个更具体的 CSS 选择器。因此，在选择器前面加上 ，nav#nav或者干脆直接加上#nav就可以了。

示例 3

让我们计算下面代码片段的 CSS 特殊性。

CSS 特殊性并不难，但它是一项技能，一旦学会，它将为你节省大量的痛苦和折磨。

通过学习这些关键的特殊性规则，您将能够编写有组织且优化的 CSS 代码。

查看下面的资源来了解更多 CSS 特殊性乐趣！

特异性

特异性计算器

CSS技巧：特异性

星球大战的具体内容

CSS 特殊性