CSS的优先级计算规则(CSS specificity calculation)是用来决定在多个CSS规则中哪个具有更高的优先级的计算方式。以下是优先级计算的规则:
-
选择器分配的优先级值,每个选择器都有自己的优先级值。
- 对于一个选择器来说,
ID选择器
的优先级最高,它的优先级值为100
。 - 对于一个选择器来说,
class选择器
、属性选择器
和伪类
的优先级值为10
。 - 对于一个选择器来说,
标签选择器
和伪元素
的优先级值为1
。 - 所有选择器的优先级都小于任何具有
!important
声明的属性。
- 对于一个选择器来说,
-
如果两个或多个选择器的优先级值相等,则可以根据下列规则判断哪个规则更具体并优先应用:
- 如果选择器中包含了一个ID选择器,则此选择器更具体。
- 如果选择器中包含了一个class选择器/属性选择器/伪类,则此选择器更具体。
- 如果选择器中包含了一个标签选择器/伪元素,则此选择器更具体。
- 如果选择器中包含了多个相同类型的选择器,则优先级相等,最内层的选择器最具体。
-
计算完所有选择器的优先级值之后,将所有选择器的优先级值加起来,得到它们的总优先级。
-
如果两个或多个规则的总优先级相等,则后面的规则将覆盖前面的规则。
以下是两个基于优先级计算的示例:
<!DOCTYPE html>
<html>
<head>
<style>
/* 第一个选择器:ID选择器具有最高级别的优先级 */
#first {
color: red;
}
/* 第二个选择器:选择器中包含ID选择器, 2个class选择器及一个属性选择器,总优先级为122 */
.second div#first.red.orange[type='submit'] {
color: blue;
}
</style>
</head>
<body>
<div id="first" class="red orange">First Text</div>
<div class="second">
<div id="first" class="red orange">
Second Text with blue color
</div>
</div>
</body>
</html>
根据上面的代码,第二个div元素将具有 Second Text with blue color
文本,因为 .second div#first.red.orange[type='submit']
的优先级比 #first
更高。
<!DOCTYPE html>
<html>
<head>
<style>
#id1 {
color: red;
}
.class1 {
color: green;
}
div {
color: blue;
}
</style>
</head>
<body>
<div id="id1" class="class1">Text</div>
</body>
</html>
在上例中,元素<div>
的文本变为 blue
,因为选择器 div
的优先级比 #id1
和 .class1
的优先级都低,所以先应用了 color: blue
。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS优先级计算的规则 - Python技术站