总结
（选择器的详细介绍在总结的下方）
1.关系选择器>： 选择后代 多个为多级后代 (较常用)+ ：选择同级的下一个，不能为多级。同时其他选择器的条件也要遵守~ ：后面的所有同级，同时其他选择器的条件也要遵守
格式：
标签或类或id>标签或类或id{
}
2.属性选择器[属性名] :表示标签中包含属性名的[属性名 = "属性值"]：表示标签中包含属性名 = "属性值"的[属性名 ^= "自定义值"] :表示标签中属性值以自定义值开头的[属性名 $= "自定义值"] ：表示标签中属性值以自定义值结尾的[属性名 *= "自定义值"] ：表示标签中属性值中含有自定义值字符的[属性名~= "自定义值"] ：表示标签中属性值包含独立的自定义值的
格式：
标签或类或id+[ ]{
}
符合前面的选择器的同时，还要符合[ ]里的条件
3.伪类选择器
(较常用)
用后代选择：
站在父元素的角度上选中第1个子元素，且该子元素刚好是父素元素下的第1个元素。
fist-child:
站在父元素的角度上选中最后一个子元素，且该子元素刚好是父素元素下的最后一个元素。
last-child:
选中当前子元素，且该子元素是它父元素下的唯一一个子元素
only-child:
站在父元素的角度上选中第（）个子元素
（）中可以使用数字，或者使用odd来底部奇数，用even来代表偶数，还可以使用字母为n的表达式，n代表0到无穷大的整数。如：3n+1 ，则选择的是第1个，第4个，第7个······
nth-child():
用类型选择：
站在父元素的角度上选中第1个该类型的子元素。
fist-of-type:
站在父元素的角度上选中最后1个该类型的子元素。
last-of-type:
选中当前子元素，且该子元素是它父元素下的唯一一个该类型的子元素
only-of-type:
站在父元素的角度上选中第（）个该类型的子元素
（）中可以使用数字，或者使用odd来底部奇数，用even来代表偶数，还可以使用字母为n的表达式，n代表0到无穷大的整数。如：3n+1 ，则选择的是第1个，第4个，第7个······
nth-of-type():
4.状态选择器
focus伪类
获取焦点状态
checked伪类
选中状态
arget伪类
通常用在a标签中,当单击a标签,目标到某个元素时,执行target伪类
一.关系选择器
1.目标的一级的后代标签
目标的一级的后代标签 (使用场景较多)
.box>p{
border:1px solid red;
}
.box2>ul>li{
border:1px solid red;
}
2.目标的紧挨着的下一个(符合标准的选择器)
目标的紧挨着的下一个(符合标准的选择器)
h2+.one{
border:1px solid red;
}
3.目标后面的所有同级(符合标准的选择器)
目标后面的所有同级(符合标准的选择器)
h2~p{
border:1px solid red;
}
二.属性选择器
标签或类或id+[ ]{
}
符合前面的选择器的同时，还要符合[ ]里的条件
1.符合属性名的
[class] 表示必须包含class属性名
符合前面的选择器的同时，还要包含[ ]里的属性名
例：
.list li[class]{
color:red;
}
<ul class="list">
<li class="box">炒肝</li>
<li id="boxzzz">卤煮</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：属性class
所以，只有炒肝的字体颜色变为了红色
2.标签中包含属性值的
[class ="box"] 表示class属性值是box
符合前面的选择器的同时，还要包含[ ]里的属性值
例：
.list li[class ="box"]{
color:red;
}
<ul class="list">
<li class="box">炒肝</li>
<li class="boxzzz">卤煮</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：属性值class="box"
所以，只有炒肝的字体颜色变为了红色
3.····属性值用····开头的
[class ^= "box"] 表示 class属性值用box开头
符合前面的选择器的同时，还要符合[ ]里的条件
例：
[class ^= "box"] 表示 class属性值用box开头
.list li[class ^= "box"]{
color:red;
}
<ul class="list">
<li class="box">炒肝</li>
<li class="boxzzz">卤煮</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值用box开头
所以，炒肝和卤煮的字体颜色都变为了红色
4.····属性值用····结尾的
[class $= "box"] 表示class属性值用box结束
符合前面的选择器的同时，还要符合[ ]里的条件
例：
[class $= "box"] class属性值用box结束的
.list li[class $="box"]{
color:red;
}
<ul class="list">
<li class="box">炒肝</li>
<li class="boxzzz">卤煮</li>
<li class="adbox">豆腐</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值用box结尾
所以，只有炒肝和豆腐的字体颜色变为了红色
5.···属性值包含···的
[class *= "box"] 表示class属性值中包含box字符
符合前面的选择器的同时，还要符合[ ]里的条件
例：
[class *= "box"] class属性值中包含box的
.list li[class *= "box"]{
color:red;
}
<ul class="list">
<li class="box">炒肝</li>
<li class="boxzzz">卤煮</li>
<li class="adbox">白菜</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值中包含box
所以，炒肝,卤煮和白菜的字体颜色都变为了红色
5.····属性值用····结尾的
[class ~= "box"] 表示class属性值中包含独立单词box
符合前面的选择器的同时，还要符合[ ]里的条件
例：
[class ~= "box"] class属性值中包含独立单词box的
.list li[class ~= "box"]{
color:red;
}
<ul class="list">
<li class="box">炒肝</li>
<li class="boxzzz">卤煮</li>
<li class="box one">白菜</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值中包含独立单词box
所以，只有炒肝和白菜的字体颜色变为了红色
三.伪类选择器
1.会受其他标签影响的
符合条件的标签生效，不符合条件的标签无反应
1.1
站在父元素的角度上选中第1个子元素，且该子元素刚好是父素元素下的第1个元素。
案例如下
但：若父元素的第一个子元素不是li则该选择器失效
.box li:first-child{
color:red;
}
1.2
站在父元素的角度上选中最后一个子元素，且该子元素刚好是父素元素下的最后一个元素。
案例如下
但：若父元素的最后一个子元素不是li则该选择器失效
.box li:last-child{
color:red;
}
1.3
站在父元素的角度上选中符合相应编号条件的子元素，且该子元素刚好是父素元下的第 编号 个元素
(odd 奇数编号 even 偶数编号 2n+1 表达式,字母必须是n)
案例如下：
.box li:nth-child(1){
color:red;
background: yellow;
}
但：若父元素的第一个子元素不是li则该选择器失效
.box li:nth-child(odd){
color:red;
background: yellow;
}
但：若父元素的奇数元素有不是li的，则标签为li的生效，不是li标签的字体颜色和背景无反应
.box li:nth-child(even){
color:red;
background: green;
}
但：若父元素的偶数元素有不是li的，则标签为li的生效，不是li标签的字体颜色和背景无反应
.box li:nth-child(2n+1){
color:red;
}
符合条件的标签生效，不符合条件的标签无反应
1.4.
box li:nth-last-child(1) 从后面开始选择
同样可以使用 (odd 奇数编号 even 偶数编号 2n+1 表达式,字母必须是n)
和上面的用法一致只不过它是从后向前选择
.box li:nth-last-child(1){
color:red;
}
1.5
选中当前子元素，且该子元素是它父元素下的唯一一个子元素
.box2 span:only-child{
color:blue;
}
当前子元素中有且只有该元素唯一一个元素时生效
2.不会受其他标签的影响的
和上面的区别在于需要限制元素类型。
(odd 奇数编号 even 偶数编号 2n+1 表达式,字母必须是n)
即：of-type
例：
限制类型从后向前选择相应编号的元素。
.box li:nth-of-type(odd){
color:red;
}
.box li:nth-last-of-type(1){
color:red;
}
选中当前子元素，且该子元素是它父元素下唯一类型的这个元素。
.box2 span:only-of-type{
color:blue;
}
四.状态选择器
1. focus伪类
获取焦点状态
input[type="text"]:focus{
background: green;
color:yellow;
}
2. checked伪类
选中状态
input[type="checkbox"]:checked{
background: yellow;
}
3 . arget伪类
通常用在a标签中,当单击a标签,目标到某个元素时,执行target伪类
.box p:target{
width: 100px;
height: 100px;
background: red;
}
此时因为点击a标签而跳转的p标签会变为红色100*100像素的状态
再次点击其他的a标签跳转到其他的标签后，该p标签恢复原来的状态
来源：CSDN
作者：fire_zero
链接：https://blog.csdn.net/fire_zero/article/details/103464763