CSS选择器

一、属性选择器

1. [att^=value] 前缀：通过属性名和属性值的前缀进行选择

在CSS中，我们可以使用属性选择器来选择具有特定属性值的元素。其中，通过设置属性值的前缀（value），我们可以选择具有以某个特定前缀开头的属性值。例如，如果我们想选择所有属性名为att且属性值以value开头的元素，可以使用[attr^=value]选择器。

2. [att$=value] 后缀：通过属性名和属性值的后缀进行选择

类似于前缀选择器，我们也可以通过设置属性值的后缀来选择具有特定属性值的元素。通过[attr$=value]选择器，我们可以选择所有属性名为att且属性值以value结尾的元素。

3. [att*=value] 包含：通过属性名和属性值的包含关系进行选择

除了前缀和后缀选择器外，我们还可以使用包含选择器来选择具有特定属性值的元素。使用[attr*=value]选择器，我们可以选择所有属性名为att且属性值包含value的元素。

二、关系选择器

1. 子代选择器（>）

子代选择器用于选择某个元素的第一级子元素。通过在两个元素之间使用大于号（>），我们可以选择作为某个元素直接子元素的元素。

2. 兄弟选择器（+，~）

兄弟选择器用于选择同一父元素下的位于后面的兄弟元素。使用加号（+）的兄弟选择器表示临近兄弟选择器，而使用波浪号（~）的兄弟选择器表示普通兄弟选择器。

（1）临近兄弟选择器（+）

临近兄弟选择器用于选择紧接在某个元素后面的兄弟元素。通过在两个元素之间使用加号（+），我们可以选择作为某个元素紧邻的兄弟元素。

（2）普通兄弟选择器（~）

普通兄弟选择器用于选择同一父元素下位于后面的所有兄弟元素。通过在两个元素之间使用波浪号（~），我们可以选择作为某个元素后面的普通兄弟元素。

三、结构化伪类选择器

1. :root选择器

:root选择器用于选择文档的根元素（通常是HTML元素）。通过使用:root选择器，我们可以对整个文档进行样式设置。

2. :not选择器

:not选择器用于选择除了指定选择器所匹配的元素以外的所有元素。例如，使用body*:not(p)选择器可以选择除了p元素以外的body中的所有元素。

3. :only-child选择器

:only-child选择器用于选择拥有唯一一个子元素的父元素。通过使用:only-child选择器，我们可以选择那些只有一个子元素的父元素。

4. :first-child和:last-child选择器

:first-child选择器用于选择作为其父元素的第一个子元素的元素。而:last-child选择器则用于选择作为其父元素的最后一个子元素的元素。

5. :nth-child(n) 和 :nth-last-child(n)

:nth-child(n)选择器用于选择正着数第n个子元素，而:nth-last-child(n)选择器则用于选择倒着数第n个子元素。

6. :nth-of-type(n)和:nth-last-of-type(n)

:nth-of-type(n)选择器用于选择同类型元素中正着数第n个元素，而:nth-last-of-type(n)选择器则用于选择同类型元素中倒着数第n个元素。

四、链接伪类选择器

链接伪类选择器用于选择具有不同状态的链接。

Link：未被访问的链接 Hover：鼠标位于其上的链接 Active：鼠标点击但未释放的链接 Visited：以前访问过的链接

以上是关于CSS选择器中属性选择器、关系选择器、结构化伪类选择器和链接伪类选择器的简要介绍。通过灵活运用这些选择器，将能够更好地控制和定制网页的样式。