CSS选择器

发布时间 2023-12-31 14:59:49作者: Python孔德逸

一、属性选择器

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

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

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

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

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

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

二、关系选择器

  1. 子代选择器(>)

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

  1. 兄弟选择器(+,~)

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

(1)临近兄弟选择器(+)

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

(2)普通兄弟选择器(~)

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

三、结构化伪类选择器

  1. :root选择器

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

  1. :not选择器

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

  1. :only-child选择器

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

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

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

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

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

  1. :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选择器中属性选择器、关系选择器、结构化伪类选择器和链接伪类选择器的简要介绍。通过灵活运用这些选择器,将能够更好地控制和定制网页的样式。