Web | CSS选择器

最新推荐文章于 2024-07-22 15:19:55 发布

朝小槿、

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量945

点赞数 18

文章标签：前端 css

本文链接：https://blog.csdn.net/Leesnwen/article/details/137560382

版权

本文详细介绍了CSS选择器的各种类型，包括基础选择器（如标签、类、ID）、组合器（如后代、子、相邻兄弟、通用兄弟）、伪类选择器（如`:first-child`、`:hover`）、伪元素选择器（如`::before`、`::after`）以及属性选择器，帮助读者理解并掌握CSS选择器的使用方法。

摘要由CSDN通过智能技术生成

1. 基础选择器

tagname
标签选择器
- (类型选择器)
- 该选择器匹配目标【元素的标签名】。
- 优先级：0,0,1。
- 例如：p、h1、strong。
.class
类选择器
- 该选择器匹配class属性中有【指定类名的元素】。
- 优先级：0,1,0。
- 例如：.media、.nav-menu。
#id
ID选择器
- 该选择器匹配拥有【指定ID属性的元素】。
- 优先级：1,0,0。
- 例如：.media、.nav-menu。
*
通用选择器
- 该选择器匹配【所有元素】。
- 优先级：0,0,0。

2. 组合器

组合器将多个【基础选择器】连接起来组成一个复杂选择器。

[空格]
后代组合器
- .class是 <tagname>元素的父元素
- 例如：.nav-menu li
>
子组合器
- 匹配的目标元素是其他元素的【直接后代】。
- 例如：.parent > .child
+
相邻兄弟组合器
- 匹配的目标元素【紧跟】在其他元素【后面】。
- 例如：p+h2
~
通用兄弟组合器
- 匹配所有跟随在指定元素之后的【兄弟元素】。⚠️注意：它不会选中目标元素之前的兄弟元素。
- 例如：li.activate ~li
复合选择器
多个基础选择器可以连起来(不使用空格或者其他组合器)组成一个复合 (compound) 选择器
- 例如：h1.page-header。
- 复合选择器选中的元素将匹配其【全部基础选择器】。
- 例如，.dropdown.is-active能够选中<div class=".dropdown.is-active">，但是无法选中<div class-"dropdown">

3. 伪类选择器

伪类选择器用于选中处于某个特定状态的元素。这种状态可能是由于用户交互，也可能是由于元素相对于父级或兄弟元素的位置。伪类选择器始终以一个冒号(:)开始。优先级等于一个类选择器(0,1,0)。

:first-child
- 匹配的元素是其父元素的第一个子元素
:last-child
- 匹配的元素是其父元素的最后一个子元素
:only-child
- 匹配的元素是其父元素的唯一一个子元素（没有兄弟元素）

:nth-child(an+b)

匹配的元素在兄弟元素中间有特定的位置。公式a·n+b里的a和b是整数，该公式指定要选中哪个元素。要了解一个公式的原理，请从0开始带入n的所有整数值。公式的计算结果指定了目标元素的位置。
例子

选择器	目标元素	结果	描述
`:nth-child(0)`	0,1,2,3,4,…	⬛️ ⬛️ ⬛️ ⬛️ ⬛️ ⬛️ ⬛️ ⬛️ ⬛️	所有元素
`:nth-child(2n)`	00,2,4,6,8,…	🔲 ⬛️ 🔲 ⬛️ 🔲 ⬛️ 🔲 ⬛️ 🔲	偶数元素
`:nth-child(3n)`	0,3,6,9,12,…	🔲 🔲 ⬛️ 🔲 🔲 ⬛️ 🔲 🔲 ⬛️	每一个第三个元素
`:nth-child(3n+2)`	2,5,8,11,14,…	🔲 ⬛️ 🔲 🔲 ⬛️ 🔲 🔲 ⬛️ 🔲	从第二个元素开始的每个第三个元素
`:nth-child(n+4)`	4,5,6,7,8,…	🔲 🔲 🔲 ⬛️ ⬛️ ⬛️ ⬛️ ⬛️ ⬛️	从第四个元素开始的每个元素
`:nth-child(-n+4)`	4,3,2,1,0,…	⬛️ ⬛️ ⬛️ ⬛️ 🔲 🔲 🔲 🔲 🔲	前四个元素

:nth-last-child(an+b)
- 类似于:nth-child()，但不是从第一个元素往后数，而是从最后一个元素往前数。括号内的公式与:nth-child()里的公式的规则相同。
:first-of-type
- 类似于：:first-child，但不是根据在全部子元素中的位置查找元素，而是根据拥有相同标签名的子元素中的数字顺序查找第一个元素。
:last-of-type
- 匹配每种类型的最后一个子元素。
:only-of-type
- 该选择器匹配的元素是满足该类型的唯一一个子元素。
:nth-of-type(an+b)
- 根据目标元素在特定类型下的数字顺序以及特定公式选择元素，类似于:nth-child
:nth-last-of-type(an+b)
- 根据元素类型以及特定公式选择元素，从其中最后一个元素往前算，类似于:nth-last-child。
:not(<selector>)
- 匹配的元素不匹配括号内的选择器。括号内的选择器必须是基础选择器，它只能指定元素本身，无法用于排除祖先元素，同时不于心包含另一个排除选择器。
:empty
- 匹配的元素没有子元素。
- ⚠️注意：如果元素包含空格就无法由该选择器匹配，因为空格在DOM中属于文本节点。(:blank可以选中包含空格的元素)
:focus
- 匹配通过鼠标点击、触摸屏幕或者按Tab键导航而获得焦点的元素。
:hover
- 匹配鼠标指针正悬停在其上方的元素。
:root
- 匹配文档根元素。
- 对HTML来说，这是<html>元素。
:disabled
- 匹配已禁用的元素，包括input、select以及button元素。
:enabled
- 匹配已启用的元素，即那些能够被激活或者接受焦点的元素。
:checked
- 匹配已经针对选定的复选框、单选按钮或选择框选项。
:invalid
- 根据输入类型中的定义，匹配有非法输入值的元素。
- 例如：当<input type="email>的值不是一个合法的邮箱地址时，该元素会被匹配(Level4)。
:valid
- 匹配有合法值的元素(Level4)。
:required
- 匹配设置了required属性的元素(Level4)。
:optional
- 匹配没有设置required属性的元素(Level4)。
  以上并未列出全部伪类选择器，参阅MDN文档pseudo-classes。

4. 伪元素选择器

伪元素类似于伪类，但是它不匹配特定状态的元素，而是匹配在文档中没有直接对应HTML元素的特定部分。伪元素选择器可能只匹配元素的一部分，甚至向HTML标记中未定义的地方插入内容。
这些选择器以双冒号(::)开头，尽管大多数浏览器也支持单冒号的语法以向后兼容。伪元素选择器的优先级与标签选择器(0,0,1)相等。

::before
- 创建一个伪元素，使其成为匹配元素的第一个子元素。该元素默认是行内元素，可用于插入文字、图片或其他形状。必须指定content属性才能让元素出现。
- 例如：menu::before
::after
- 创建一个伪元素，使其成为匹配元素的最后一个子元素。该元素默认是行内元素，可用于插入文字、图片或其他形状。必须指定content属性才能让元素出现。
- 例如：menu::after
::first-letter
- 用于指定匹配元素的第一个文本字符的样式。
- 例如：h2::first-letter
::first-line
- 用于指定匹配元素的第一行文本的样式。
::selection
- 用于指定用户使用鼠标高亮选择的任意文本的样式。通常用于改变选中文本的background-color。
- 只有少数属性可以使用，包括color、background-color、cursor、text-decoration。

5. 属性选择器

属性选择器用于根据HTML属性匹配元素。优先级于一个类选择器(0,1,0)相等。

[attr]
- 匹配的元素拥有指定属性attr，无论属性值是什么
- 例如：input[disable]
[attr="value"]
- 匹配的元素拥有指定属性attr，且属性值等于指定的字符串值。
- 例如：input[type="radio"]
[attr^="value"]
- “开头”属性选择器
- 该选择器匹配的元素拥有指定属性attr，且属性值的开头是指定的字符串值
- 例如：a[href^="https"]
[attr$="value"]
- “结尾”属性选择器
- 该选择器匹配的元素拥有指定属性attr，且属性值的结尾是指定的字符串值
- 例如：a[href$=".pdf"]
[attr*="value"]
- “包含”属性选择器
- 该选择器匹配的元素拥有指定属性attr，且属性值包含指定的字符串值
- 例如：[class*="sprite-"]
[attr~="value"]
- “空格分隔的列表”属性选择器
- 该选择器匹配的元素拥有指定属性attr，且属性值是一个空格分隔的值列表，列表中的某个值等于指定的字符串值
- 例如：a[rel^="author"] ｜可以选中
[attr|="value"]
- 该选择器匹配的元素拥有指定属性attr，且属性值要么等于指定的字符串值，要么以该字符串开头且紧跟着一个连字符(-)。适用于语言属性，因为该属性有时候会指定一种语言的子集。比如墨西哥西班牙语，es-MX，或者普通的西班牙语，es。
- 例如：[lang|="es"]