周五下了班，来把css中所有的选择器给大家做个细致的大集合，满满干货，包含了目前所有的选择器以及其权重和具体使用方法。建议收藏，在开发中使用起来便捷度也能拉满，废话不多说。直接开始：
首先为了方便初学的小伙伴记忆，先灌输一下基础概念。
各个选择器的权重:
标签选择器 0 0 0 1 简单记忆 1
类选择器 0 0 1 0 简单记忆10
id选择器 0 1 0 0 简单记忆100
行内样式 1 0 0 0 简单记忆1000
!important如果不是继承,权重最高 天下第一
复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
不会有进位的情况，比如 0,0,0, 10
优先级相同,会执行层叠性,写在最后面的会生效.
权重由大到小分别为以下：
注：权重的计算中，没有进位！！！
1.！importent权重为无穷大。
注：!important不能提高继承的优先级 只要是继承 优先级最低.
div {
color: pink!important;
}2.行内css样式 权重为1000（直接写在html标签内的样式属性）
行内样式写法：
- 任意标签【容器级别标签和文本级别标签】都可以添加行内样式
- 需要在双标签、单标签的开始标签位置书写
- 在开始标签名字后面，别忘记有空格，给这个标签添加一个style（英文：样式，风格）属性
- style属性值得写法：样式属性名字 + ：+ 样式属性的属性值 + ；
- 别忘记在样式属性值后面加一个分号，代表当前这一个样式设置完毕，进行下一个样式属性
- 一个标签可以同时设置多个样式，多个样式之间用分号隔开
示例如下：
<div style="color: red;"></div>3.id选择器 权重为100
注：id选择器就像我们的身份证号码一样，只能有一个。id定义，#调用！
例：
为 id="liliwuang" 的元素设置样式：
#liliwuang
{
background-color:yellow;
}4.类选择器 权重为10
注：类选择器也叫class选择器，就像我们的名字一样，可以有很多个，并且多个标签可以用同一个类名。class定义，.调用
例：
为 class="liliwuang" 的元素设置样式：
.liliwuang
{
background-color:yellow;
}5.标签选择器： 权重为1
直接用标签调用
例：
为h2标签设置样式：
h2{ background-color:yellow; }复合选择器：权重会叠加
1.后代选择器
选择器1 选择器2{
属性:属性值;
...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}
2.子代选择器（亲儿子选择器）
选择器1> 选择器2{
属性:属性值;
...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}
3.并集选择器
选择器1, 选择器2{
属性:属性值;
...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{color:pink;}4.交集选择器
选择器1选择器2{
属性:属性值;
...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{
color:green;
}5.伪类选择器 自身的权重为10
选择器:hover{
属性:属性值;
...
}
鼠标经过时候的样式
a:hover{}
div:hover{}
.box:hover{}:的前面和后面不能有空格
6.伪元素选择器 自身权重为1
选择器：：before/after{
content：""；（必须写content否则无效）
}
liliwuang::after{
content:"lili";
color:red;
}7.结构伪类选择器 自身权重为10
很好用的一种选择器，可以免去取名字的烦恼
例：
<ul>
<li>第1</li>
<li>第2</li>
<li>第3</li>
<li>第4</li>
<li>第5</li>
<li>第6</li>
<li>第7</li>
<li>第8</li>
<li>第9</li>
</ul>如果用常规选择器，选起来那叫一个麻烦，这时候用我们的结构伪类选择器就是一个很好的选择。
如果要选中其中第三个li可以这样操作：
ul li:nth-child(3){
color:red;
}除此之外还有很多种拓展写法：
仅选中其中的34567项
ul li:nth-child(n+3):not(:nth-child(n+8)) {
color: red;
}写法还有很多拓展可以和我私信交流
nth-child和nth-child-type的区别：
同级中存在不同种类标签，则可以使用nth-child-type来区别选中。
我们可以这样理解nth-child-type：
先在同级里找到所有的标签类型，然后根据 n 进行匹配；
