什么是CSS的特异性，它如何工作？

假设您正在构建一个网页，并希望所有的链接都是粉红色的，以便在页面上的其他文本中脱颖而出，默认情况下是黑色的。对于您的内部链接，您不仅想更改其字体颜色，而且还希望大胆地添加额外的重点。这可能会增加访客点击他们并在您的网站上停留更长的机会的机会。

To style these HTML elements on a web page, you needCSS selectors。CSS选择器是定义要使用CSS样式的元素的修饰符。CSS选择器有不同类型的类型，每个选择器都有自己的独特语法，可以告诉浏览器哪些元素将CSS应用于。

要继续上面我们的示例，假设您添加针对所有[HREF]元素的CSS选择器和专门包含您网站名称的[HREF]元素（这些是您的内部链接）。您可以使用字体重量和字体色属性相应地定义它们。但是，当您在网站的前端预览更改时，您不会看到内部链接的正确格式。这是怎么回事？

您可能会违反CSS特异性规则之一，因此，必须在代码中回溯以解决错误。这是一个痛苦，但很普遍。CSS特异性是在CSS中学习的最重要，最困难的概念之一。

在这篇文章中，我们将说明CSS特异性是什么，然后浏览规则，以便您可以在Web项目中正确应用CSS，并避免不得不浏览代码。

在我们的CSS speci看不同的规则ficity, let’s clearly define the levels of specificity of each type of CSS selector. Below is what’s called the “specificity hierarchy.” It starts with selector types with the highest specificity to the lowest.

1. ID选择器：ID选择器s are the most specific. These select an element based on its ID attribute and have the syntax #idname.
2. 类选择器，属性选择器和伪级选择器：
   a)Class selectors select all elements in aCSS课程and have the syntax .class name.
   b）属性选择器选择具有给定属性的所有元素并具有语法[attr]。
   C）伪级选择器仅在特殊状态（例如访问或悬停）并具有语法选择器：伪级时才能选择元素。
   d）These three selector types have equal specificity.
3. 类型选择器: These select all HTML elements that have a given node name and have the syntax element.
4. 通用选择器：通用选择器（*）对特异性没有影响。

CSS特异性规则

在开始编写HTML和CSS之前，有许多CSS特异性规则可以熟悉自己。让我们在下面看一下

Rule 1: The CSS selector with higher specificity applies.

如果HTML元素由多个选择器靶向，则浏览器将应用具有更高特异性的选择器的CSS规则。

说一个元素是由ID选择器和类选择器。在这种情况下，由于ID选择器具有较高的特异性，因此ID选择器的CSS样式将通过类选择器的样式应用于元素。

让我们看一个示例，在下面证明此规则。

例如，您希望按钮元素在您的身上栗色Bootstrap site。然后，您将使用类选择器来定义按钮类下的所有元素以具有栗色背景颜色（hex color code＃80000）和白色字体颜色（#ffffff）。但是，您希望主页上的订阅按钮是一个例外，以便更引人注目。然后，您可以使用ID选择器来定义带有ID“主页”的一个按钮，以具有Fuschia背景颜色（＃ff00ff）和黑色字体颜色（＃000000）。所有没有ID“主页”的Bootstrap按钮仍将遵循类选择器的CSS规则。

这是CSS：

＃主页 {
background-color: #FF00FF;
颜色：＃000000;
}
.btn {
背景色：＃800000;
颜色：#ffffff;
}

这是HTML：

在
订阅

这是结果：

图像源

规则2：如果CSS选择器具有相等的特异性，则最后一个应用。

如果将多个选择器应用于相同的HTML元素，并且具有相同的特异性，则浏览器将应用稍后出现在样式表中的选择器的CSS规则。

Let’s take another look at the example above. Say you applied both selectors to yourBootstrap button elements，每个都有不同的字体和背景颜色规则，但是选择器都是类选择器。然后后一个将适用。

这是CSS：

.btn {
background-color: #FF00FF;
颜色：＃000000;
}
.btn {
背景色：＃800000;
颜色：#ffffff;
}

这是HTML：

在
订阅

这是结果：

图像源

规则3：内联CSS具有最高的特异性。

CSS可以以三种方式写入：内联，在HTML DOC的<头>部分或外部CSS样式表中。内联样式，也称为“嵌入式样式表”，具有最高的特异性，并自动获胜。

考虑到以前显示秩序重要的规则，这是有道理的。内联CSS是最接近HTML元素的，因此它更具体，因此被应用。让我们看一个示例，在下面说明此规则。

这是<头>部分的CSS：

.btn {
background-color: #FF00FF;
颜色：#ffffff;
}

这是HTML：

在
订阅

这是结果：

图像源

您如何超越CSS中的特异性？

在CSS中!important property是上述所有特异性规则的例外，因此覆盖了元素上的所有其他声明。

尽管您可能很想利用这一规则，而是在结合属性值时遵循许多其他特异性规则，但不要。使用！重要的属性被认为是一种不良习惯，因为它破坏了样式表的自然级联。这使维护和调试您的网站变得更加困难，尤其是如果您与开发人员团队合作。

在某些用例中，重要的属性可以使用，例如定义公用事业类时，因此我们将简要介绍下面的示例。

假设您希望按钮类针对的任何元素看起来像同一按钮。然后，您将使用.btn类选择器应用唯一的样式属性。现在一切都很好。在构建网页的过程中，您添加了一个新的部分，其中包含带有按钮类的链接的ID名称“内容”。您还将另一个规则添加到CSS中，定义所有带有ID名称“内容”的元素，以带有虚线蓝色边框。

You now have two selectors targeting the same HTML element. And, as we know, because an ID selector has a higher specificity than a class selector, the CSS style of the ID selector takes precedence over the CSS style of the class selector. The second element would therefore have a blue dotted border instead of a solid black one. To avoid this and ensure that the style properties of the .btn class apply to all elements under that class name, regardless of the selector types or order, then you could add the !important property.

这是CSS：

。按钮 {
background: red !important;
颜色：白色！重要；
填充：3PX！重要；
边界拉迪乌斯：5px！重要；
边界：1px实心黑色！
}
#content a {
边界：1px点蓝色；
}

这是HTML：

做事
<节ID =“ content”>
 text text blah Do Thing