首先我们来看一张表格
选择器 | 选择器权重 |
---|---|
继承父类选择器 或者 * | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器 或 链接伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style | 1,0,0,0 |
!important | 极为重要 |
需要注意的有两点:
1.子类继承父类得到的选择器继承权重为0,0,0,0
<!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>
/* 父类的权重是100 */
#father {
color: pink !important;
}
/* 但子类继承父类选择器得到的权重永远是0,所以文字会显示orange颜色 就算在pink后加!important也是一样*/
p {
color: orange;
}
</style>
</head>
<body>
<div id="father">
<p>从此艳遇落金城,一人撑伞两人行</p>
</div>
</body>
</html>
2.权重之间的相加比较
<!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>
/* 权重:0,0,0,1 */
li {
color: pink;
}
/* 权重:0,0,0,1 + 0,0,0,1 = 0,0,1,0 */
ul li {
color: orange;
}
/* 权重:0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.father li {
color: red;
}
</style>
</head>
<body>
<ul class="father">
<li>我是谁</li>
<li>我在哪</li>
<li>我要干什么</li>
</ul>
</body>
</html>