css中的权重规则
2019-08-12 本文已影响29人
jaimor
问题
css的加载顺序 行内 > 内部 > 外部 / id选择器 > class选择器？？？
0
今天我们来讲讲css中的权重问题。在很久很久以前，老师给我说，样式有三种写法，一种是行内样式，一种是内部样式，还有一种是外部样式。在引入样式的时候，行内样式优先级是最高的，内部样式会覆盖外部样式。id选择器大于class选择器。我也没想，就信了，在很长一段时间里，按照这种规则去写代码，是没有问题的。直到有一次写代码注意到了这个问题，开始重视……
最开始是这样的，没有毛病，内部样式会覆盖外部样式。
/*test.css*/
#div { color: red; }
<link rel="stylesheet" href="test.css">
<style>
#div {
color: yellow;
}
</style>
<div id='div'>
<p id='p'>这里是测试文本</p>
</div>
1
然后这样，也是没有问题的，id选择器 > class选择器
<style>
#div { color: yellow; }
.div { color: red; }
</style>
<div id='div' class='div'>
<p id='p'>这里是测试文本</p>
</div>
2
当你一直认为这是正确的时候，突然出现了这样的问题
/*test.css*/
#div { color: red; }
<style>
#div {
color: yellow;
}
</style>
<link rel="stylesheet" href="test.css"> <!-- 在后边引入 -->
<div id='div'>
<p id='p'>这里是测试文本</p>
</div>
3
当在<style>标签后边引入外部css的时候，发现HTML居然用的外部样式，不是说好的内部优先级高于外部吗？？？好吧，估计是我记错了，按照加载顺序，本来后加载的就应该覆盖之前加载的，这我是可以接受的。
然后，页面代码再次改变……
<style>
#div p { color: red; }
#p { color: yellow; }
</style>
<div id='div' class='div'>
<p id='p'>这里是测试文本</p>
</div>
4
好了，这次我彻底不淡定了，说好的id选择器优先级应该要高于class和tag标签选择器啊，所以#p的优先级应该是最高的啊……由此引入今天的话题——css权重。
概述
css最终显示的样式是由权重确定的，每一种选择器都有一个权重值，不管谁先加载或后加载，谁的权重值最终最大，就显示谁的样式。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名或者伪元素+1。并且做加法时不进位。比如
#div .test p {} /* 0111 */
body#container div {} /* 0102 */
/*相加时不进位*/
.p1 .p2 .p3 .p4 .p5 .p6 .p7 .p8 .p9 .p10 .p11 div { color: red; } /* 0,0,11,1 */
#p1 div { color: yellow; } /* 0,1,0,1 */ /* 这是大于上边一行的权重，所以显示出来是黄色的 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p1 .p2 .p3 .p4 .p5 .p6 .p7 .p8 .p9 .p10 .p11 span { color: red; }
#div span { color: yellow; }
</style>
</head>
<body style="background-color: black;">
<div id="div">
<p class='p1'>
<p class='p2'>
<p class='p3'>
<p class='p4'>
<p class='p5'>
<p class='p6'>
<p class='p7'>
<p class='p8'>
<p class='p9'>
<p class='p10'>
<p class='p11'>
<span>这里是测试数据</span>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</div>
</body>
</html>
result
总结记忆方式：
- 将权重标记为
千百十个四个数位，起始数字都为0 - 看见一个行内样式
style=""，就在千位上+1 - 看见一个id选择器
id=""，则在百位上+1 - 看见一个类选择器
class=""伪类选择器:hover属性选择器[type='']，则在十位上+1 - 看见一个标签选择器
span伪元素选择器::after，则在个位上+1 - 此外的选择器
*>+等不计入 - 最终从左往右开始比较，相等则继续比较，不等则停止比较，较大者权重大。
