css选择器优先级问题(选择器的权重图)
A.为啥有此问题的产生?
a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的。
b.对于单一的选择器而言,优先级别有固定的顺序,按照这个优先级别去设置同一样式,就不会出现样式覆盖,但是如果遇到了中级选择器(如派生选择器),该如何判断优先级别呢?
因此就提出了选择器权重规则
B.选择器权重图如下所示:
选择器 | 权重 |
---|---|
!important | 无穷大 |
行内样式(标签里面写style) | 1000 |
id选择器 | 100 |
类选择器(class) | 10 |
属性选择器([属性名=属性值]) | 10 |
伪元素 | 10 |
标签选择器§ | 1 |
伪类 | 1 |
通配符 | 0 |
C.中级选择器甚至更复杂的选择器如何进行权重的计算呢?
1.以下面的源代码为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器权重问题</title>
<style type="text/css">
div > #content span{
color: brown;
font-family: "宋体";
}
div .one span{
color: pink;
font-family: "楷体";
}
</style>
</head>
<body>
<div>
<div class="one" id="content"><span>坚持,不只是为了离梦想更近一步</span></div>
<div></div>
<div></div>
</div>
</body>
</html>
2.分析
选择器的执行顺序是从上往下的
那么div .one span这个选择器在 div > #content span选择器之后,为啥不会显示后者所编写的css样式,而是选择显示前者的css样式呢?
我们给div .one span选择器取名为m,div > #content span选择器取名为n
那么m的权重=标签选择器权重×1+类选择器权重×1+标签选择器×1
=1+10+1=12
n的权重=标签选择器权重×1+id选择器权重×1+标签选择器×1
=1+100+1=102
m的权重<n的权重
因此n的优先级别高,不用管其在css里面的位置,只要写了,就一定是它优先执行
不会被后面比它优先级小的选择器修改样式
总结:复杂的选择器权重=单个选择器权重之和