CSS 特异性

什么是特异性？

如果有两个或多个冲突的CSS规则指向同一个元素，则浏览器会遵循一些规则来确定哪一个最具体，因此胜出。将特异性视为分数/等级，以确定哪种样式声明最终应用于元素。通用选择器（*）具有低特异性，而ID选择器具有高度特异性！

注意：特殊性是CSS规则不适用于某些元素的常见原因，尽管您认为它们应该如此(主观判断理应如此)。

特异性层次结构

每个选择器都在特定层次结构中占有一席之地定义选择器的特异性级别有四个类别：

内联样式 - 内联样式直接附加到要设置样式的元素。示例：<h1 style =“color：#ffffff;”>。
ID - ID是页面元素的唯一标识符，例如#navbar。
类，属性和伪类 - 此类包括.classes，[attributes]和伪类，例如:hover，:focus等。
元素和伪元素 - 此类别包括元素名称和伪元素，例如h1，div，：before和：after。

如何计算特异性？

记住如何计算特异性！从0开始，为style属性表示1000，为每个ID表示为100，为每个属性，类或伪类表示为10，为每个元素名称或伪元素表示为1。考虑这三个代码片段：

A: h1
                B: #content h1
                C: <div id="content"><h1 style="color: #ffffff">标题</h1></div>

A的特异性为1（一个元素）,B的特异性为101（一个ID参考和一个元素）,C的特异性为1000（内联样式），由于1 < 101 < 1000，第三规则（C）具有更高的特异性水平，因此将被应用。

特异性规则

等特异性：最新规则计数 - 如果将相同规则写入外部样式表两次，则样式表中的下面那条规则更接近要设置样式的元素，因此将应用：

h1 {background-color: yellow;}
                h1 {background-color: red;}

尝试一下

后一条规则总是适用。

ID选择器具有比属性选择器更高的特异性 - 请查看以下三个代码行：

div#a {background-color: green;}
                #a {background-color: yellow;}
                div[id=a] {background-color: blue;}

尝试一下

第一条规则比其他规则更具体，并将予以应用。

上下文选择器比单个元素选择器更具体 - 嵌入式样式表更接近要设置样式的元素。所以在以下情况

来自外部的样式::
                #content h1 {background-color: red;}

                来自内部的样式:
                <style>
                #content h1 {
                  background-color: yellow;
                }
                </style>

后一条规则将适用。

类选择器击败任意数量的元素选择器 - 类选择器，如.intro 优先于 h1，p，div等：

.intro {background-color: yellow;}
                h1 {background-color: red;}

通用选择器和继承的值具有0 - *的特异性，body *和类似具有零特异性。继承的值也具有0的特异性。

什么是特异性？

特异性层次结构

如何计算特异性？

特异性规则

相关页面