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|="value"]
- 该选择器匹配的元素拥有指定属性
attr
,且属性值要么等于指定的字符串值,要么以该字符串开头且紧跟着一个连字符(-)。适用于语言属性,因为该属性有时候会指定一种语言的子集。比如墨西哥西班牙语,es-MX,或者普通的西班牙语,es。 - 例如:
[lang|="es"]
- 该选择器匹配的元素拥有指定属性
不区分大小写的属性选择器
上述属性选择器都是区分大小写的。选择器规范Level4提出了一种不区分大小写的修饰符,可以作用于任何属性选择器。它的用法是将i
添加到结束方括号前面
- 例如:
input[value="search"i]
很多浏览器还不支持此特性。不支持的浏览器会直接忽略。因此,如果使用了不区分大小写修饰符,请确保提供一个常规的区分大小写的回退方案。