总结css中几大选择器

一、基础选择器：

1.元素选择器
2.类选择器
3、id选择器
4、通配符选择器
5、组合选择器(并集选择器)

二、层次选择器：

1、子级选择器
前提；要有元素嵌套
书写格式：父元素+“>”子元素{声名块}

2、后代选择器：书写格式：父元素加空格加后代元素{声明块}

通配符选择器：

3、兄弟选择器
1、相邻兄弟：书写格式：兄弟元素A+"+“兄弟元素B 选择p后面相邻的div，AB中间不能有元素。只能选择一个。
2、通用选择器(不相邻兄弟）AB没有相邻：兄弟元素A+”~"+兄弟元素B
可以选择多个。

三、伪类选择器：

1、结构伪类选择器
：格式：元素名：nth-child（位置） 适用场景：所有兄弟元素都是相同的标签名
格式：元素名：nth-of-type（位置） 适用场景：兄弟元素的标签名可以不同。
选中第一个元素：元素名：first-child

选中最后一个元素：元素名：last-child

选中偶数项元素：元素名：nth-child（2n) 2n可以换成even

选择所有基数项元素：元素名：nth-child（2n+1) 2n+1可以换成odd

选择前n个元素：元素名：nth-child（-n+个数）

选中倒数第n个元素：书写格式：元素：nth-last-last(个数）

2、否定伪类选择器：
书写格式：元素名：not（否定的内容）
例子：除了第三个都添加样式
p:not(:nth-child(3)){color:red;}

3.否定伪类选择器： （否定多个元素）
书写格式：not（否定元素的位置1）：not（否定元素位置2）

4、动态伪类选择器：
状态1：未访问 ：link
状态2：鼠标悬停（移入） :hover
状态3：点击时 :active
状态4：已访问 :visited
书写顺序：
第一种 🔗hover:actived:visited
第二种 :hover🔗actived:visited
：link ：visited 只能a标签使用，其余两个状态其它标签可以用，使用pinlv比较高的是actived

foucus：聚焦
鼠标换了，按tab键可以移动。聚焦到a标签变红。当a标签被激活时，即获取到焦点框，注：类似于鼠标移入（键盘tab键）
a：focus{color：red；}

四、伪元素选择器：
元素A::before{声明块}
before是元素A的第一个子元素

元素A::after{声明块}
after是元素A的最后一个子元素

元素A::first-line{声明块}
元素A的第一行

元素A::first-letter{声明块}
元素A的第一个汉字（中文），第一个字母（英文）

3、选取内容样式的添加：
书写格式： ::selection{声明块}
注意：目前只支持字体颜色和背景色
例子
::selection{
color:white;background-color:deeppink;}

五、属性选择器：

书写格式
元素名： 元素名[name=“box”] 元素名[ 属性名=“属性值”]
元素名：[name^=“部分属性值”]，表示以XXX开头的属性值
元素名[name$=“部分的属性值”] 表示以xxx结尾的属性值