Specificity

这可能看起来并不重要，在大多数情况下您不会遇到任何冲突，但是随着您的 CSS 文件变得越来越大、越来越复杂，或者您开始处理越来越多的 CSS 文件，发生冲突的可能性就会越大。

越具体 = 优先级越高

如果选择器相同，则最后一个规则将始终优先。例如，如果您有

p { color: red }
p { color: blue }

<p> 元素框中的文本将被设为蓝色，因为该规则最后出现。

但是，您通常不会有意地拥有具有冲突声明的相同选择器（因为那样意义不大）。然而，当您拥有嵌套选择器时，冲突确实会合法地出现。

div p { color: red }
p { color: blue }

在这个例子中，您可能会认为嵌套在 <div> 中的 <p> 框将被设为蓝色，因为将 <p> 框设为蓝色的规则最后出现，但实际上它们会被设为红色，这是因为第一个选择器的优先级更高。基本上，选择器越具体，在遇到冲突样式时，它获得的优先权就越高。

计算优先级

一组嵌套选择器的实际优先级需要一些计算。您可以为每个ID 选择器（“#whatever”）赋予 100 的值，为每个类选择器（“.whatever”）赋予 10 的值，为每个HTML 选择器（“whatever”）赋予 1 的值。当您将它们全部加起来时，瞧，您就得到了一个优先级值。

• <p> 的优先级是 1（1 个 HTML 选择器）
• div p 的优先级是 2（2 个 HTML 选择器，1+1）
• .tree 的优先级是 10（1 个类选择器）
• div p.tree 的优先级是 12（2 个 HTML 选择器 + 1 个类选择器，1+1+10）
• #baobab 的优先级是 100（1 个 ID 选择器）
• body #content .alternative p 的优先级是 112（HTML 选择器 + ID 选择器 + 类选择器 + HTML 选择器，1+100+10+1）

因此，如果使用所有这些示例，div p.tree（优先级为 12）将胜过 div p（优先级为 2），而 body #content .alternative p 将胜过所有这些规则，无论顺序如何。