小码哥的IT人生

CSS 特异性 详解

css3基础 2022-05-23 12:06:51小码哥的IT人生shichen

CSS 特异性

什么是特异性?

如果有两条或两条以上指向同一元素的冲突 CSS 规则,则浏览器将遵循一些原则来确定哪一条是最具体的,并因此胜出。

将特异性(specificity)视为得分/等级,能够确定最终将哪些样式声明应用于元素。

通用选择器(*)具有较低的特异性,而 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">Heading</h1></div>
  1. A 的特异性为 1(一个元素)
  2. B 的特异性为 101(一个 ID 引用以及一个元素)
  3. C 的特异性为 1000(行内样式)

由于 1 < 101 < 1000,因此第三条规则(C)具有更高的特异性,所以将被应用。

特异性规则 1:

在特异性相同的情况下:最新的规则很重要 - 如果将同一规则两次写入外部样式表,那么样式表中后面的规将更靠近要设置样式的元素,因此会被应用:

示例代码:

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>这是标题 1</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

后一条规则始终适用。

特异性规则 2:

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">这是一个 div</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

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

特异性规则 3:

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

示例代码:

来自外部 CSS 文件:

#content h1 {background-color: red;}

在 HTML 文件中:

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

将适用后一条规则。

特异性规则 4:

类选择器会击败任意数量的元素选择器 - 类选择器(诸如 .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">这是一个标题</h1>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

此外,通用选择器以及被继承的值拥有 0 - * 的特异性,body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024