选择器分类和权重计算，less 中的 解释
一、选择器分类
css中选择器有：简单选择器和复杂选择器
1、简单选择器
- 通配符选择器（*）：匹配任何元素
- 标签选择器（标签）：指用HTML标签名称作为选择器
- 类选择器（class）：使用"."(英文点号)进行标识，后面紧跟类名。
- id选择器：使用#进行标识，后面紧跟id名
2、复杂选择器
- 1.属性选择器
- 2.组合选择器
| 选择器 | 含义 |
|---|---|
| 并集选择器A,B | 两个选择器之间，逗号隔开的，逗号可以理解为和的意思 |
| 后代选择器A B | 把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲，再写儿子孙子。 |
| 子元素选择器A>B | 只能选择作为某元素子元素(亲儿子)的元素， 把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接 |
| A + B | 选中匹配 B 且为匹配 A 的元素的下一相邻元素 |
| A ~ B | 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素 |
交集选择器AB | 两个选择器之间不能有空格 |
交集选择器与后代选择器的区别？
从格式上来看
后代选择器：两个选择器之间要有空格
交集选择器：两个选择器之间没有空格
从内容上来看
后代选择器：后面一个标签/类选择器一定是前一个的后代，也就是说嵌套
交集选择器：后面一个标签只是对前面的标签选择器进行横向的再次筛选
交集选择器
<style> div.b { background-color: aqua; } </style> <body> <div class="b"> <p>我是一个屁</p> <span>我是span</span> <span>我是span</span> <span>我是span</span> </div> </body>- 3.伪类选择器
| 选择器 | 含义 |
|---|---|
| a:link | 匹配所有未被点击的链接 |
| a:visited | 匹配所有已被点击的链接 |
| a:hover | 匹配鼠标悬停其上的a元素 |
| a:active | 匹配鼠标已经其上按下、还没有释放的a元素 |
| E:first-child | 匹配父元素的第一个子元素E |
| E:last-child | 匹配父元素的最后一个子元素E |
| E:nth-child(n) | 匹配父元素的第n个子元素E（odd奇数，even偶数） |
nth-child与nth-of-type区别：
1. nth-child 对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配，若不匹配则不使用
2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E . 然后再根据E找第n个孩子
五、伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::before | 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面 |
| E::after | 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面 |
二、CSS三大特性
「1. CSS 层叠性」
「2. CSS 继承性」
「3. CSS 优先级(CSS特殊性)」
权重计算公式：
标签选择器 | 计算权重公式 |
继承或者 * | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
每个类，伪类 | 0,0,1,0 |
每个ID | 0,1,0,0 |
每个行内样式 style="" | 1,0,0,0 |
每个!important 最重要的 div { color: pink !important; } | ∞ 无穷大 |
权重叠加：
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三、less 中的 & 解释
参考：
less 的 & 详解_hsany330的博客-CSDN博客_less中的&什么意思
& 作用介绍
内层选择器前面的 & 符号就表示对父选择器的引用。在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。同时用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上
1.当前选择器的伪类或者伪元素。如 :hover :focus :after :before等
.demo { &:after { content: '.'; display: block; background-color: aquamarine; } } /*被解释为*/ .demo:after { content: '.'; display: block; background-color: aquamarine; }2.作为内层选择器表示对父选择器的引用。交集选择器
.demo { &-title { text-align: center; } } /*被解释为*/ .demo-title { text-align: center; }3、后代选择器
.demo { .demo-title { text-align: center; } } 被解释为 .demo .demo-title { text-align: center; }4、反转嵌套的顺序并且可以应用到多个类名上
.demo-title { .demo & { font-size: 20px; } } 被解释为 .demo .demo-title { font-size: 20px; }