CSS有三个非常重要的特性:层叠性、继承性、优先级
对优先级的一些理解:
当同一个元素指定多个选择器,就会有优先级的产生。
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
选择器权重如下表所示:
选择器 | 选择器权重 |
---|---|
继承或者*(通配符) | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important重要的 | ∞无穷大 |
优先级注意点:
- 权重是有4组数字组成,但是不会有进位!(例如一个并集选择器中,由十个标签选择器组成,不及一个类选择器的权重大)。
- 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。
- 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
- 注意,可以简单记忆成,通配符和继承的权重为0,标签(元素)选择器的权重为1,类(伪类)选择权重为10,id选择器权重为100,行内样式表权重为1000,!important权重无穷大
- 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
权重叠加:
如果是复合选择器,则会有权重叠加,需要计算权重。
举几个例子:
- div ul li ----------> 0,0,0,3
- .nav ul li ----------> 0,0,1,2
- a:hover ----------> 0,0,1,1
- .nav a ----------> 0,0,1,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>Document</title>
<style>
/* 继承的权重为0 */
.nav {
color: red;
}
/* 元素选择器权重为1 因此会显示绿色 */
li {
color:green;
}
</style>
</head>
<body>
<ul class="nav">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>
</html>
效果为:
<!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>Document</title>
<style>
/* .nav li 权重为11 */
.nav li{
color: red;
}
/* 需求把第一个小li 颜色改为绿色 加粗 */
/* .green权重为10 不可行 .nav .green 权重为20 因此会显示绿色加粗 */
.nav .green {
color:green;
font-weight:700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="green">11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>
</html>
效果为: