当一个元素被多个规则锁定，并且有不同的选择器，影响同一个属性时会发生什么？
例如，我们来谈谈这个元素。
<p class="dog-name">Roger</p>
我们可以有
.dog-name {
color: yellow;
}
和另一条针对p 的规则，它将颜色设置为另一个值。
还有另一条规则是针对p.dog-name 。哪条规则将优先于其他规则，为什么？
输入特定性。如果两条或更多的规则具有相同的特异性，最后出现的那条规则将获胜。
有时，在实践中什么是更具体的，对初学者来说有点混乱。我想说的是，对于那些不经常看这些规则的专家来说，也会感到困惑，或者干脆忽略它们。
如何计算特异性
特异性是用一个惯例来计算的。
我们有4个槽，每一个都从0开始：0 0 0 0 。左边的槽是最重要的，而最右边的是最不重要的。
就像十进制系统中的数字一样：1 0 0 0 比0 1 0 0 高。
槽位1
第一个槽位，也就是最右边的那个，是最不重要的。
当我们有一个类型选择器时，我们增加这个值。一个类型是一个标签的名字。如果你在规则中有一个以上的类型选择器，你就相应地增加存储在这个槽中的值。
例子。
p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */
槽位2
第二个槽被递增了3个东西。
- 类选择器
- 伪类选择器
- 属性选择器
每当一条规则满足其中之一，我们就从右边开始递增第二列的值。
例子。
.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */
当然槽2选择器可以与槽1选择器结合。
div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */
类的一个很好的技巧是，你可以重复相同的类并增加特异性。比如说。
.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */
槽3
槽3容纳了CSS文件中最重要的可以影响你的CSS特异性的东西：id 。
每个元素都可以分配一个id 属性，我们可以在我们的样式表中使用这个属性来针对该元素。
例子。
#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */
槽位4
槽4受到内联样式的影响。任何内联样式将优先于任何在外部CSS文件中定义的规则，或在页面标题中的style 标签内的规则。
例子。
<p style="color: red">Test</p> /* 1 0 0 0 */
即使CSS中的任何其他规则定义了颜色，这个内联样式规则也将被应用。除了一种情况--如果使用!important ，它就会填补5号槽。
重要性
如果一条规则以!important 结尾，其特殊性并不重要。
p {
font-size: 20px !important;
}
该规则将优先于任何更具体的规则。
根据特异性规则，在CSS规则中添加!important ，将使该规则比任何其他规则更重要。另一条规则能够优先于其他规则的唯一方法是，它也有!important ，并且在其他不太重要的位置有更高的特异性。
提示
一般来说，你应该使用你需要的特异性，但不能超过。这样，你就可以制作其他的选择器来覆盖前面的规则所设定的规则，而不会发疯。
!important 是CSS为我们提供的一个备受争议的工具。许多CSS专家主张不要使用它。我发现自己特别是在尝试一些样式时使用它，而一条CSS规则有很多特殊性，我需要使用 ，让浏览器应用我的新CSS。!important
但一般来说，!important 不应该在你的CSS文件中出现。
使用id 属性来设计CSS样式也有很多争论，因为它的特异性非常高。一个好的选择是使用类来代替，它的特异性较低，因此更容易操作，而且功能更强大（你可以为一个元素设置多个类，而且一个类可以重复使用多次）。
你可以使用网站specificity.keegan.st/，为你自动进行特异性计算。
这很有用，特别是当你试图弄清楚事情的时候，因为它可以成为一个很好的反馈工具。
