CSS 特异性


目录

    显示目录


什么是特异性?

如果有两个或多个指向相同的 CSS 规则 元素,具有最高特异性值的选择器将“获胜”,其 样式声明将应用于该 HTML 元素。

将特异性视为决定哪种风格声明的分数/排名 最终应用于元素。

看下面的例子:

实施例1

在此示例中,我们使用“p”元素作为选择器,并指定红色 对于这个元素。文本将为红色:

 <html>
<head>
  <style>
    p {color: red;} 
  
  </style>
</head>
<body>
<p>Hello World!</p>
  
</body>
  </html>

自己尝试一下 →

<!DOCTYPE html>
<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>

自己尝试一下→

<!DOCTYPE html>
<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>

自己尝试一下 →

<!DOCTYPE html>
<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>

自己尝试一下→

<!DOCTYPE html>
<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 选择器在特殊性层次结构中都有其位置。

有四个类别定义选择器的特异性级别:

1. 内联样式 - 示例:

<h1 style="color: pink;">

2. ID - 示例:

#navbar

3. 类、伪类、属性选择器 - 示例:

.test, :hover, [href]

4. 元素和伪元素 - 示例:

h1, ::before

如何计算特异性?

记住如何计算特异性!

从0开始,每个ID值加100,每个ID值加10 类别值(或 伪类或属性选择器),为每个元素选择器或伪元素添加 1。

注意:内联样式的特异性值为 1000,并且是 始终被赋予最高优先级!

注2:有一个 此规则的例外情况:如果您使用 !important 规则,它甚至会覆盖内联样式!

下表显示了有关如何计算特异性值的一些示例:

Selector Specificity Value Calculation
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 (the universal selector is ignored)

特异性值最高的选择器将获胜并生效!

考虑这三个代码片段:

例子

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;}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>



ID 选择器比属性选择器具有更高的特异性 - 看下面三行代码:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>

<div id="a">This is a div</div>

</body>
</html>


第一条规则比其他两条更具体,因此将被应用。


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

例子

From external CSS file:
#content h1 {background-color: red;}

In HTML file:
<style>
#content h1 {background-color: 
yellow;}
</style>

将适用后一条规则。


类选择器胜过任意数量的元素选择器 - .intro 等类选择器胜过 h1、p、div 等:

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">This is a heading</h1>

</body>
</html>



通用选择器 (*) 和继承值的特异性为 0 - 通用选择器 (*) 和继承的值将被忽略!