浏览器执行CSS选择器的规则：
有一个选择器.body div .hello {}
正常情况下，我们会认为浏览器会先找到 .body元素，然后在.body元素的子元素中寻找div元素，然后在div元素的子元素中寻找.hello元素。
但是，可以想象一下，浏览器先找到多个.body元素，那么每个都会进行遍历。
实际上，为了性能考虑，浏览器的解析是反过来的，其实它是从右往左解析的，浏览器会先找到.hello元素，然后判断.hello元素的父级元素中有没有div元素，然后再判断div元素的父级元素中有没有.body元素，这样，形成先定位到元素，再判断定位的元素是否满足需求的这种方式。
CSS选择器的分类：
- 元素选择器 a{}
- 伪元素选择器 ::before{} ::after {} 真实存在的元素
- 类选择器 .link{}
- 属性选择器 [type=radio]{}
- 伪类选择器 :hover{}
- ID选择器 #id{}
- 组合选择器 [type=checkbox] + label {}
- 否定选择器 :not(.link){}
- 通用选择器 *{}
CSS选择器的权重
- ID选择器 #id{} +100
- 类 属性 伪类 +10
- 元素 伪元素 +1
- 其他选择器 +0
计算一个不进位的数字：
#id .link a[href]
- #id +100
- .link +10
- a +1
- [href] +0
- result: 111
#id .link.active
- #id +100
- .link +10
- .active +10
- result: 120
可以看到，第一个的选择器的权重比较小，它的样式会先被应用，然后，第二个权重比较大的选择器会被应用，同名的样式会覆盖小的选择器的样式。
记住：权重大的选择器覆盖权重小的选择器，权重大的选择器永远在上面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 权重计算是100 */ #test1 { color: red; } /* 权重计算是100+10=110 所以会覆盖权重比较小的样式，最后显示的是blue*/ #test1.test1 { color: blue; } /* 权重计算是10 */ .test2 { color: red; } /* 权重计算是1 + 10 = 11 所以会覆盖权重比较小的样式，最后显示的是blue */ div.test2 { color: blue; } /* 权重计算是100 */ #test3 { color: red; } /* 权重计算是10 × 11 = 110 注意，这里虽然比100高，但是权重的计算是不进位的，也就是说，这个110是 100 × 0 + 10 × 11，而上面的权重是 100 × 1，比较是先比较位的，所以上面的权重更大一些。所以显示red */ .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11 { color: blue; } </style> </head> <body class="body" id="body"> <div id="test1" class="test1">test1</div> <div class="test2">test2</div> <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">test3</div> </body> </html>
响应选择器权重的特殊情况：
- !important优先级最高
- 直接写在html上的元素属性style的样式最高
- 相同权重 后写的生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> <style> /* 同样的权重后面覆盖前面，所以是blue */ .test1 { color: red; } .test1 { color: blue; } /* ！important的权重是最高的（css文件） ，所以是red */ .test2 { color: red !important; } .test2 { color: blue; } /* 虽然这里使用了id选择器，也加上了！important，但是大的前提是这个还是外部的css文件，内部的style元素属性是最高的，所以是blue */ #test3 { color: red ！important; } </style> </head> <body> <div class="test1">test1</div> <div class="test2">test2</div> <div id="test3" style="color: blue;">test3</div> </body> </html>