CSS 特异性
什么是特异性?
如果有两个或多个 CSS 规则指向同一个元素,则特异性值最高的选择器将“获胜”,其样式声明将应用于该 HTML 元素。
将特异性视为确定最终将哪种样式声明应用于元素的分数/等级。
查看以下示例:
示例 1
在此示例中,我们使用“p”元素作为选择器,并为该元素指定红色。文本将为红色:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
现在,查看示例 2:
示例 2
在此示例中,我们添加了一个类选择器(名为“test”),并为该类指定了绿色。文本现在将为绿色(即使我们为元素选择器“p”指定了红色)。这是因为类选择器具有更高的优先级:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
现在,查看示例 3:
示例 3
在此示例中,我们添加了 id 选择器(名为“demo”)。文本现在将变成蓝色,因为 id 选择器具有更高的优先级:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
现在,查看示例 4:
示例 4
在此示例中,我们为“p”元素添加了内联样式。文本现在将变成粉红色,因为内联样式具有最高优先级:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
特异性层次结构
每个 CSS 选择器在特异性层次结构中都有其位置。
有四个类别定义选择器的特异性级别:
内联样式 - 示例:<h1 style="color: pink;">
ID - 示例:#navbar
类、伪类、属性选择器 - 示例:.test、:hover、[href]
元素和伪元素 - 示例:h1、::before
如何计算特异性?
记住如何计算特异性!
从 0 开始,为每个 ID 值添加 100,为每个类值(或伪类或属性选择器)添加 10,为每个元素选择器或伪元素添加 1。
注意:内联样式的特异性值为 1000,并且始终具有最高优先级!
注意 2:此规则有一个例外:如果您使用 !important 规则,它甚至会覆盖内联样式!
下表展示了一些如何计算特异性值的示例:
选择器 | 特异性值 | 计算 |
---|---|---|
p | 1 | 1 |
p.test | 11 | 1 + 10 |
p#demo | 101 | 1 + 100 |
<p style="color: pink;"> | 1000 | 1000 |
#demo | 100 | 100 |
.test | 10 | 10 |
p.test1.test2 | 21 | 1 + 10 + 10 |
#navbar p#demo | 201 | 100 + 1 + 100 |
* | 0 | 0(忽略通用选择器) |
特异性值最高的选择器生效!
考虑以下三个代码片段:
示例
A:h1
B:h1#content
C:<h1 id="content" style="color: pink;">Heading</h1>
A 的特异性为 1(一个元素选择器)
B 的特异性为 101(一个 ID 引用 + 一个元素选择器)
C 的特异性为 1000(内联样式)
由于第三条规则(C)具有最高特异性值(1000),因此将应用此样式声明。
更多特异性规则示例
同等特异性:最新规则胜出 - 如果相同的规则两次写入外部样式表,则最新规则胜出:
示例
h1 {background-color: yellow;}
h1 {background-color: red;}
ID 选择器比属性选择器具有更高的特异性 - 查看以下三行代码:
示例
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
第一条规则比其他两条规则更具体,因此将应用。
上下文选择器比单个元素选择器更具体 - 嵌入式样式表更接近要设置样式的元素。因此在以下情况下
示例
/*来自外部 CSS 文件:*/
#content h1 {background-color: red;}
/*在 HTML 文件中:*/
<style>
#content h1 {background-color: yellow;}
</style>
将应用后一条规则。
类选择器优于任意数量的元素选择器 - 类选择器(例如 .intro)优于 h1、p、div 等:
示例
.intro {background-color: yellow;}
h1 {background-color: red;}
通用选择器 () 和继承值的特异性为 0 - 通用选择器 () 和继承值将被忽略!
总结
本文介绍了CSS特性/优先级的使用,如有问题欢迎私信和评论