一、css属性选择器: 通过html属性选择对应的标签
1 选择符[属性名]{ } 当一个元素有当前html属性值名称则匹配成功.
2 选择符[属性名=“属性值”] 属性和属性名都匹配成功才做选中
3 选择符[属性~=“属性值”] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配.
4 选择符[属性^=“字符”] 当这个属性值开头的时候被匹配(只要开头匹配就行)
5 选择符[属性$=“字符”] 当这个属性值结尾的时候被匹配(只要结尾匹配就行)
6 选择符[属性*=“字符”] 只要属性值里面包含这个字符就能匹配
7 选择符[属性|=“字符”] 属性值仅有当前字符 或者 以字符-开头的 (left-con)
二、结构性伪类选择器 : 通过在第几个进行查找
语法比如：
h2:first-child { } 选中 h2所在 整个 集合里面的第一个h2
h2:last-child { } 选中 h2所在 整个 集合里面的最后一个h2
h2:nth-child(第几个直接写数字){}通过第几个进行查找 (第几个)也可以写：even（奇数） odd（偶数） 2n（奇数） 2n + 1（偶数）
h2:nth-last-child(倒数第几个){ }
h2:only-child { } 当前集合里面只有一个h2才会被选中
当一个集合（父元素）里包含其他（多个）不同类元素的时候，用下面的写法：
意思是：先去找到h2所在的子集 然后剔除h2以外的元素 再找第一个h2
h2:first-of-type { } 选中 h2所在 整个 集合里面的第一个h2
h2:last-of-type { } 选中 h2所在 整个 集合里面的最后一个h2
h2:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1
h2:nth-last-of-type(倒数第几个){ }
h2:only-of-type { } 当前集合里面只有一个h2才会被选中
总结: 分析:当前同级元素是否为一类,如果非一类的情况下 选用of-type选择
三、目标伪类选择器：
:target
四：UI元素状态伪类：
下面三个（只用于表单）
:enabled 表单元素可用的时候执行的样式
语法：input:enabled{
background:pink;
}
:disabled 表单元素禁用的时候执行的样式
:checked 表单选中(单选 多选按钮选中的时候)需结合层级选择器使用
语法：结构： <input type="checkbox">
<label for="">篮球</label>
css：input:checked+label{
background:green;
}
对有文本内容的标签使用：
::selection 文本选中的时候的样式.
五、动态伪类选择器：
:link{color: red;} 未访问的链接状态
:visited{color: green;} 已访问的链接状态
:hover{color: blue;} 鼠标滑过链接状态
:active{color: yellow;} 鼠标按下去时的状态
:focus 用于表单聚焦（当那个表单控件聚焦了，就发生变化）
语法：input:focus{
background:;
}
六、层级选择器：
1：子选择器
父元素选择器>子元素选择器 选中只是父元素最近一层的子元素。
2:兄弟元素选择器
元素1+元素2 同级 选中元素1同级离得最近的下面的同级元素
3:通用选择器
元素1~元素2 同级 选中元素1同级下面的所有的元素2
