CSS选择器

选择器

CSS选择器汇总如下:

选择器 名称 说明 CSS版本
* 通用选择器 匹配所有元素 2
<type> 元素选择器 匹配指定类型的元素 1
#<id> id选择器 匹配指定id的元素 1
.<class> class选择器 匹配指定class的元素 1
[attr]系列 属性选择器 匹配指定attr的元素 2~3
s1,s2,s3... 分组选择器 匹配多个选择器的元素 1
s1 s2 后代选择器 匹配指定选择器的后代元素 1
s1 > s2 子选择器 匹配指定选择器的子元素 2
s1 + s2 相邻兄弟选择器 匹配指定选择器相邻的元素 2
s1 ~ s2 普通兄弟选择器 匹配指定选择器后面的元素 2
::first-line 伪元素选择器 匹配块级元素文本的首行 1
::first-letter 伪元素选择器 匹配块级元素文本的首字母 1
::before 伪元素选择器 匹配元素之前插入内容 2
::after 伪元素选择器 匹配元素之后插入内容 2
::selection 伪元素选择器 匹配被用户选中的元素 3

CSS选择器分为基本选择器、复合选择器和伪元素选择器。

基本选择器

通用选择器

* {
    border: 1px solid red;
}
1
2
3

通用选择器会匹配所有HTML元素,包括<html><body>

元素选择器

p {
    color: red;
}
1
2
3

直接使用元素名称作为选择器名,匹配指定类型的元素。

id选择器

#abc {
    font-size: 20px;
}
1
2
3

对元素设置id属性,然后使用#id值来匹配这个元素。

class选择器

.abc {
    border: 1px solid red;
}
1
2
3

对元素设置class属性,然后使用.class值来匹配这个类型的一个或多个元素。

x.abc {
    border: 1px solid red;
}
1
2
3

也可以使用元素名.class值来更具体地限定某种元素。

属性选择器

// 需要CSS2
[href] {
    color: orange;
}
1
2
3
4

匹配设置了指定属性的元素。如<a href=...

// 需要CSS2
[type="password"] {
    border: 1px solid red;
}
1
2
3
4

匹配设置了指定属性值的元素。如<input type="password">

// 需要CSS3
[href^="https"] {
    color: orange;
}
1
2
3
4

匹配指定属性的值以该值为开头的元素。如<a href="https://www.google.com">谷歌</a>

// 需要CSS3
[href$="com"] {
    color: orange;
}
1
2
3
4

匹配指定属性的值以该值为结尾的元素。如<a href="https://www.google.com">谷歌</a>

// 需要CSS3
[href*="google"] {
    color: orange;
}
1
2
3
4

匹配指定属性的值包含该值的元素。如<a href="https://www.google.com">谷歌</a>

[class~="edf"] {
    font-size: 50px;
}
1
2
3

属性值有多个值时,匹配其中一个值就算匹配成功。<p class="abc edf">

[lang|="en"] {
    color: red;
}
1
2
3

属性值有多个值且使用-连接符分割的,匹配其中一个值就算匹配成功。如<i lang="en-us">HTML5</i>

复合选择器

将不同的选择器进行组合形成新的特定匹配,称为复合选择器。

分组选择器

p,b,i,span {
    color: red;
}
1
2
3

将多个选择器以,分割,同时匹配这些选择器。分组选择器可以是ID选择器、class选择器、属性选择器等混合使用。

后代选择器

p b {
    color: red;
}
1
2
3

匹配<p>元素中所有的<b>元素,而不在乎<b>的层次深度。后代选择器可以混合使用D选择器、class选择器、属性选择器等。

子选择器

ul > li {
    border: 1px solid red;
}
1
2
3

子选择器与后代选择器类似,区别在于子选择器只能选择父元素向下一级的元素,而不能再往下。

相邻兄弟选择器

p + b {
    color: red;
}
1
2
3

匹配和第一个元素相邻的第二个元素。如<p>相邻的<b>

普通兄弟选择器

p ~ b {
    color: red;
}
1
2
3

匹配和第一个元素后面的所有指定元素。如<p>后面的所有<b>

伪元素选择器

块级首行

::first=line {
    color: red;
}
1
2
3

<p><div>等块级元素的首行文本被选定。

如果想限定某种元素,可以加上前置,如p::first-line

块级首字母

::first=letter {
    color: red;
}
1
2
3

<p><div>等块级元素的首字母被选定。

如果想限定某种元素,可以加上前置,如p::first-letter

文本前插入

a::before {
    content: '开始-';
}
1
2
3

<a>元素的文本内容前插入指定内容。

文本后插入

a::after {
    content: '-结束';
}
1
2
3

<a>元素的文本内容后插入指定内容。

伪类选择器

伪类选择器是:开头,而伪元素选择器是::开头。

伪类选择器分为:结构性伪类、UI伪类、动态伪类和其他伪类。

选择器 名称 说明 CSS版本
:root 根元素选择器 匹配文档中的根元素 3
:first-child 子元素选择器 匹配元素中的第一个子元素 2
:last-child 子元素选择器 匹配元素中的最后一个元素 3
:only-child 子元素选择器 匹配元素中只有唯一一个子元素的那个子元素 3
:only-of-type 子元素选择器 匹配元素中只有一个指定类型的子元素的那个子元素 3
:nth-child(N) 子元素选择器 选择指定第N个子元素 3
:enabled UI选择器 匹配启用状态的元素 3
:disabled UI选择器 匹配禁用状态的元素 3
:checked UI选择器 匹配被选中的input元素 3
:default UI选择器 匹配默认状态的元素 3
:valid UI选择器 匹配验证有效的input元素 3
:invalid UI选择器 匹配验证无效的input元素 3
:required UI选择器 有required属性的元素 3
:optional UI选择器 无required属性的元素 3
:link 动态选择器 未访问的超链接元素 1
:visited 动态选择器 已访问的超链接元素 1
:hover 动态选择器 匹配悬停在超链接上的元素 2
:active 动态选择器 匹配激活超链接上的元素 2
:focus 动态选择器 匹配获得焦点的元素 2
:not 其他选择器 匹配否定选择的元素 3
:empty 其他选择器 匹配没有任何内容的元素 3
:lang 其他选择器 匹配包含lang属性的元素 2
:target 其他选择器 匹配选取URL片段标识指向的元素 3

结构性伪类

根元素选择器

:root {
    border: 1px solid red;
}
1
2
3

匹配文档中的根元素,基本不怎么使用,常返回<html>

子元素选择器

ul > li:first-child {
    color: red;
}
1
2
3

匹配<ul>的第一个<li>子元素。

UI伪类

// 文本输入框启用与禁用时的背景色
input[type="text"]:enabled {
    background-color: pink;
}
input[type="text"]:disabled {
    background-color: #ccc;
}
1
2
3
4
5
6
7

动态伪类

// 未访问过的超链接
a:link {
    color: red;
}
// 已访问过的超链接
a:visited {
    color: orange;
}
// 鼠标悬停在超链接上时
a:hover {
    color: blue;
}
// 鼠标按下,激活超链接时
a:active {
    color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
input:focus {
    border: 1px solid red;
}
1
2
3

<input>获得焦点时。

其他伪类

a:not([href*="baidu"]) {
    color: red;
}
1
2
3

匹配href属性不包含"baidu"的<a>元素。

:empty {
    display: none;
}
1
2
3

匹配没有任何内容的元素。

:target {
    color: red;
}
1
2
3

定位到锚点时,锚点变红。