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

假设您正在构建网页，并希望所有链接都是热粉红色，以默认为黑色的其他文本脱颖而出。对于您的内部链接，您不仅要更改其字体颜色 - 您还希望粗体加入额外的重点。这可能会改善访问者点击他们的机会并在您的网站上保持更长的时间。

要在web页面上样式化这些HTML元素，您需要CSS选择器。CSS选择器是定义与CSS样式的元素的修饰符。有不同类型的CSS选择器，每个CSS选择器都有自己的独特语法，告诉浏览器将CSS应用于该元素。

继续上面的例子，假设你添加了针对所有a[href]元素的CSS选择器，以及包含你网站名称的a[href]元素(这些是你的内部链接)。你可以通过font-weight和font-color属性来定义它们。但是，当您在站点的前端预览更改时，您没有看到内部链接的正确格式。这笔交易是什么?

您可能违反了CSS特定规则之一，因此必须在代码中回溯以修复错误。这是一种痛苦，但很常见。CSS特性是CSS中最重要也是最难学的概念之一。

在这篇文章中，我们将解释什么是CSS特性，然后介绍这些规则，这样你就可以在你的web项目中正确地应用CSS，避免在你的代码中寻找bug。

在我们查看CSS特异性的不同规则之前，让我们清楚地定义每种类型CSS选择器的特异性。以下是所谓的“特异性层次结构”。它从选择器类型开始，最高特异性最低。

1. ID选择器:ID选择器是最具体的。这些基于其ID属性选择一个元素，并具有语法#idName。
2. 类选择器、属性选择器和伪类选择器:
   一)C类选择器选择a中的所有元素CSS类并具有语法.Class名称。
   b)属性选择器选择具有给定属性的所有元素并具有语法[attr]。
   c)伪类选择器只在特殊状态下(如已访问或悬停)选择元素，并且具有语法选择器:Pseudo-class。
   d)这三种选择器类型具有相同的特异性。
3. 类型选择器:这些选择具有给定节点名和语法元素的所有HTML元素。
4. 通用选择器:通用选择器(*)对专一性没有影响。

CSS特异性规则

在开始编写HTML和CSS之前，您需要熟悉一些CSS特有的规则。让我们在下面看看它们

规则1:应用具有更高特异性的CSS选择器。

如果一个HTML元素是多个选择器的目标，那么浏览器将应用具有更高特异性的选择器的CSS规则。

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

下面让我们看一个演示这个规则的例子。

例如，您希望按钮元素在您的引导网站。然后使用类选择器定义button类下的所有元素，使其具有栗色背景色(十六进制颜色代码＃80000）和白色字体颜色（#ffffff）。但是您希望主页上的订阅按钮是一个例外，使其更加引人注目。然后，您可以使用ID选择器定义ID“主页”的一个按钮，以具有Fuschia背景颜色（＃FF00FF）和黑色字体颜色（＃000000）。没有ID“主页”的所有Bootstrap按钮仍将遵循类选择器的CSS规则。

这是CSS：

#{主页
background - color: #就;
颜色：＃000000;
}
.btn {
background - color: # 800000;
颜色:# FFFFFF;
}

HTML:

<按钮类型=“按钮”类=“BTN”ID =“主页”>订阅
<按钮类型=“按钮”类=“BTN”>订阅

这是结果：

图片来源

规则2:如果CSS选择器具有相同的特异性，那么最后一个适用。

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

让我们再看一下上面的例子。假设你应用了两个选择器Bootstrap按钮元素，每个字体和背景颜色的规则都有不同的规则，但选择器都是类选择器。然后后者会申请。

这是CSS：

.btn {
background - color: #就;
颜色：＃000000;
}
.btn {
background - color: # 800000;
颜色:# FFFFFF;
}

HTML:

<按钮类型=“按钮”类=“BTN”ID =“主页”>订阅
<按钮类型=“按钮”类=“BTN”>订阅

这是结果：

图片来源

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

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

考虑到先前的规则，这是一个有意义的显示命令问题。内联CSS最接近HTML元素，因此它更具体，因此应用。让我们来看看展示下面这个规则的示例。

以下是部分的CSS:

.btn {
background - color: #就;
颜色:# FFFFFF;
}

HTML:

<按钮类型=“按钮”类=“btn”style =“background-color：＃800000”>订阅
<按钮类型=“按钮”类=“BTN”>订阅

这是结果：

图片来源

您如何覆盖CSS中的特异性？

在CSS中，！重要的财产是上面提到的所有特异性规则的例外，因此覆盖元素上的所有其他声明。

尽管您可能想利用这条规则，但在组合属性值时，请不要遵循许多其他的专一性规则。使用!important属性被认为是一种不好的做法，因为它破坏了样式表的自然级联。这使得维护和调试你的网站变得更加困难，特别是当你和一个开发团队一起工作的时候。

在一些用例中，可以使用!important属性，比如在定义实用程序类时，因此我们将简要地看一下下面的示例。

假设您希望button类的任何目标元素看起来都像同一个按钮。然后你可以用。btn类选择器应用独特的样式属性。现在都好了。在构建web页面的过程中，添加了一个ID名为“content”的新部分，其中包含一个带有button类的链接。您还可以向CSS添加另一个规则，定义ID名为“content”的所有元素，使其具有蓝色虚线边框。

现在有两个选择器针对同一个HTML元素。而且，正如我们所知道的，因为ID选择器比类选择器有更高的特异性，ID选择器的CSS样式优先于类选择器的CSS样式。因此，第二个元素将具有蓝色虚线边框，而不是纯黑色边框。为了避免这种情况并确保.btn类的样式属性适用于该类名下的所有元素，而不管选择器类型或顺序如何，那么你可以添加!important属性。

这是CSS：

。按钮 {
背景:红色!重要;
颜色:白色!重要;
填充：3px！重要;
边界半径：5px！重要;
边框:1px纯黑色!重要;
}
#content a {
边框:1px点蓝色;
}

HTML:

 do thing 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
< / >节

这是结果：

图片来源

让你的CSS具体化

理解特异性规则对于完全控制HTML和CSS非常重要。有了这些知识，格式就会像您期望的那样显示出来，这样您就不必去搜索代码中的错误了。