Specificity
特定性是浏览器决定哪个CSS属性值与元素最相关的手段，因此将被应用。特定性基于由不同种类的CSS选择器组成的匹配规则。
如何计算特异性？
特定性是应用于给定CSS声明的权重，由匹配选择器中每个选择器类型的数量决定。当多个声明具有相同的特性时，CSS中的最后一个声明将应用于该元素。特定性仅适用于多个声明所针对的相同元素。按照CSS规则，直接目标元素总是优先于元素从其祖先继承的规则。
注：元素的邻近性在文档树中对特异性没有影响。
选择器类型
下列选择器类型列表按具体情况增加：
- 类型选择器（例如
h1）和伪元素（例如:before）。
- 类选择器（例如
.example），属性选择器（例如[type="radio"]）和伪类（例如:hover）。
- ID选择器（例如，
#example）。
- 通用选择器（
*），组合子（+，>，~，“”）和否定伪类（:not()）对特异性没有影响。（然而内部 声明的选择器是:not()这样做的）
- 添加到元素的内联样式（例如，
style="font-weight:bold"）总是覆盖外部样式表中的任何样式，因此可以认为具有最高的特定性。
该!important例外
在important样式声明中使用规则时，此声明将覆盖任何其他声明。虽然在技术上!important与特异性没有任何关系，但它直接与它相互作用。!important,然而，使用这种做法是不好的做法，应该避免这种做法，因为通过打破样式表中的自然级联使调试更加困难。当两个与!important规则相冲突的声明应用于相同的元素时，将应用具有更高特异性的声明。
一些经验法则：
- 在考虑 !important 之前，总是寻找一种使用特异性的方法
- 只能用于
!important覆盖外部CSS的特定于页面的CSS（来自外部库，如Bootstrap或normalize.css）。
!important在编写插件/混搭时切勿使用。
- 切勿
!important用于在整个网站的CSS。
!important
- 更好地使用CSS层叠属性
- 使用更具体的规则。通过在元素之前指定一个或多个元素，您将选择规则变得更具体，并获得更高的优先级：
<div id="test"> <span>Text</span> </div>
div＃test span {color：green; } div span {color：blue; } span {color：red; }
- 作为（2）的一个无意义的特例，重复简单的选择器来增加特殊性，当你没有更多的指定。无论顺序，文本将是绿色的，因为该规则是最具体的。（而且，尽管规则的顺序，蓝色的规则会覆盖红色的规则）您应该在以下情况下使用它： A）方案一：
- 您有一个全局CSS文件，可以在全局范围内设置您网站的可视化方面。
- 您（或其他人）在元素上使用内联样式。这被认为是非常糟糕的做法。
在这种情况下，您可以在全局CSS文件中设置特定的样式，因此重写直接在元素上设置的内联样式。
真实世界的例子：一些写得不好的使用内联样式的jQuery插件。
B）另一种情况
#someElement p {
color: blue;
}
p.awesome {
color: red;
}你怎么让awesome段落变红，甚至内部#someElement？没有!important，第一条规则将具有更多的特殊性，将赢得第二条规则。
如何重写 !important
A）简单地添加另一个CSS规则!important，并给选择器更高的特性（向选择器添加标签，ID或类），或者在稍后的点添加CSS规则。这是有效的，因为在特定的关系中，定义的最后一条规则胜出。
一些具有较高特异性的例子：
table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }B）或者在现有的选择器之后添加相同的选择器：
td { height: 50px !important; }C）或者重写原来的规则，以避免!important完全使用。
欲了解更多信息，请访问：
该:not例外
否定伪类:not不 认为是特异性计算一个伪类。但是在确定选择器类型的计数时，选择器作为普通选择器放置在否定伪类中。
这块CSS ...
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}...与以下HTML一起使用时...
<div class="outer">
<p>This is in the outer div.</p>
<div class="inner">
<p>This text is in the inner div.</p>
</div>
</div>...显示效果如下：
形式特异性
特定性基于选择器的形式。在以下情况下，*[id="foo"]即使选择一个ID，选择器也会计算为属性选择器来确定选择器的特殊性。
以下CSS样式..。
*#foo {
color: green;
}
*[id="foo"] {
color: purple;
}...当与这个标记一起使用时...
<p id="foo">I am a sample text.</p>...最后看起来是这样
这是因为它匹配相同的元素，但是ID选择器具有更高的特异性。
无视树的附近空间
元素与给定选择器中引用的其他元素的接近度对特异性没有影响。以下样式声明...
body h1 {
color: green;
}
html h1 {
color: purple;
}...下面的HTML...
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>...将作为：
这是因为两个声明具有相同的选择器类型计数，但是html h1选择器是最后声明的。
直接目标元素与继承样式
直接定位元素的样式总是优先于继承的样式，而不管继承的规则的特殊性如何。这个CSS ...
#parent {
color: green;
}
h1 {
color: purple;
}...下面的HTML...
<html>
<body id="parent">
<h1>Here is a title!</h1>
</body>
</html>...还将作为：
这是因为h1选择器专门针对元素，但是绿色选择器仅从其父项继承。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
