选择器分类和权重计算，less 中的 & 解释

一、选择器分类

css中选择器有：简单选择器和复杂选择器

1、简单选择器

1. 通配符选择器（*）：匹配任何元素
2. 标签选择器（标签）：指用HTML标签名称作为选择器
3. 类选择器（class）：使用"."(英文点号)进行标识，后面紧跟类名。
4. id选择器：使用#进行标识，后面紧跟id名

 2、复杂选择器

• 1.属性选择器

• 2.组合选择器 

选择器	含义
并集选择器A,B	两个选择器之间，逗号隔开的，逗号可以理解为和的意思
后代选择器A B	把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲，再写儿子孙子。
子元素选择器A>B	只能选择作为某元素子元素(亲儿子)的元素， 把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
A + B	选中匹配 B 且为匹配 A 的元素的下一相邻元素
A ~ B	选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素
交集选择器AB	两个选择器之间不能有空格

交集选择器与后代选择器的区别？ 

从格式上来看
后代选择器：两个选择器之间要有空格
交集选择器：两个选择器之间没有空格
从内容上来看
后代选择器：后面一个标签/类选择器一定是前一个的后代，也就是说嵌套
交集选择器：后面一个标签只是对前面的标签选择器进行横向的再次筛选

交集选择器

 

    

        
我是一个屁
        我是span
        我是span
        我是span
    

• 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;
}