前端三剑客
CSS

CSS 选择器

# CSS 常见选择器

# 1. 基础选择器

基础选择器用于选择特定类型的 HTML 元素，它们是 CSS 最基本的选择器。基础选择器包括元素选择器、类选择器、id 选择器和通配符选择器。

# 1.1 元素选择器

语法 : 标签名 {}

作用 : 选中对应标签中的内容。能快速将同一类型的标签都选择出来，但不能差异化。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素选择器示例</title>
    <style>
        /* 标签选择器，选中所有 div 元素 */
        div {
            color: red; /* 将文字颜色设置为红色 */
            font-size: 30px; /* 将文字大小设置为30像素 */
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div>world</div>
    <div>nihao</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 1.2 类选择器 (class 选择器)

语法 : .class属性值 {}

类名用 . 开头，通过类属性来指定元素样式。一个标签可以有多个类名，可以让多个标签都使用一个类。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器示例</title>
    <style>
        /* 类选择器，选中所有 class="one" 和 class="two" 的元素 */
        .one {
            color: green; /* 将文字颜色设置为绿色 */
        }
        .two {
            font-size: 70px; /* 将文字大小设置为70像素 */
        }
    </style>
</head>
<body>
    <!-- 一个类选择器可以被多个标签来引用，一个标签也可以引用多个类选择器 -->
    <div class="one">hello</div>
    <div>world</div>
    <div class="one two">nihao</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

注意: class 属性值不能以数字开头，如果以符号开头，只能是 _ 或 -。

# 1.3 id 选择器

语法 : #id属性值 {}

以 # 开头表示 id 选择器，id 值是唯一的，只能有一个。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>id 选择器示例</title>
    <style>
        /* id 选择器，选中 id="world" 的元素 */
        #world {
            color: rgb(225, 0, 255); /* 将文字颜色设置为紫色 */
            font-size: 70px; /* 将文字大小设置为70像素 */
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div id="world">world</div>
    <div>nihao</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意: id 属性值不能以数字开头，id 选择器只能在一个文档中唯一。

# 1.4 通配符选择器

语法 : * {}

作用 : 让页面中所有的标签执行该样式，通常用来清除间距。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>通配符选择器示例</title>
    <style>
        /* 通配符选择器，选中所有元素 */
        * {
            color: red; /* 将所有元素的文字颜色设置为红色 */
        }
    </style>
</head>
<body>
    <div>hello</div>
    <p>world</p>
    <span>nihao</span>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面通配符选择器会让页面中所有的内容都会变成红色。

# 1.5 基础选择器优先级

id 选择器 > 类选择器 > 标签选择器

基础选择器总结:

选择器类型	作用
标签选择器	选出所有相同标签
类选择器	选出具有特定 class 的元素
id 选择器	选出具有特定 id 的元素
通配符选择器	选出页面中的所有元素

# 2 复合选择器

复合选择器用于选择多个条件组合的 HTML 元素，它们是 CSS 选择器的进阶应用。复合选择器包括后代选择器、子选择器、并集选择器和伪类选择器。

# 2.1 后代选择器

语法 : 祖先元素后代元素 { 样式声明 }

作用 : 选中所有在祖先元素内的后代元素，不限层级。

元素1 元素2 {

	设置样式	
	
}

1
2
3
4
5

注意

① 只对元素2 进行设置样式，不影响元素1
② 元素1 是父级，元素2 可以是子级，或孙子级，或重孙子级…
③ 元素1 和元素2 可以是标签选择器、类选择器、id 选择器…

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后代选择器示例</title>
    <style>
        /* 后代选择器，选中 div 内所有 p 元素 */
        div p {
            background-color: yellow; /* 将背景颜色设置为黄色 */
        }
    </style>
</head>
<body>
    <div>
        <p>段落 1。在 div 中。</p>
        <p>段落 2。在 div 中。</p>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

展示效果:

注意: 后代选择器会选中祖先元素内的所有后代元素，无论其层级关系。

# 2.2 子选择器

语法 : 父元素 > 子元素 { 样式声明 }

作用 : 只选取作为某元素直接子元素的元素。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子选择器示例</title>
    <style>
        /* 子选择器，选中 div 内直接子元素 p */
        div > p {
            background-color: yellow; /* 将背景颜色设置为黄色 */
        }
    </style>
</head>
<body>
    <div>
        <h2>我的名字是 Donald</h2>
        <p>我住在 Duckburg。</p>
    </div>
    <div>
        <span><p>这个段落不会被选中，因为它是 span 的子元素。</p></span>
    </div>
    <p>我的好朋友是 Mickey。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

展示效果:

注意: 子选择器只能选取直接子元素，不会选取孙子元素及更深层级的后代元素。

# 2.3 相邻兄弟选择器

语法 : 元素1 + 元素2 { 样式声明 }

作用 : 选择紧接在 元素1 之后的 元素2，且二者必须有相同的父元素。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>相邻兄弟选择器示例</title>
    <style>
        /* 相邻兄弟选择器，选中 div 元素后的第一个 p 元素 */
        div + p {
            background-color: yellow; /* 将背景颜色设置为黄色 */
        }
    </style>
</head>
<body>
    <h1>文章标题</h1>
    <div>
        <h2>DIV 内部标题</h2>
        <p>DIV 内部段落。</p>
    </div>
    <p>DIV 之后的第一个 P 元素。</p>
    <p>DIV 之后的第二个 P 元素。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

展示效果:

# 2.4 后续兄弟选择器

语法 : 前一个元素 ~ 后续元素 { 样式声明 }

作用 : 选择前一个元素之后的所有相邻兄弟元素。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后续兄弟选择器示例</title>
    <style>
        /* 后续兄弟选择器，选中 div 元素之后的所有相邻兄弟元素 p */
        div ~

 p {
            background-color: yellow; /* 将背景颜色设置为黄色 */
        }
    </style>
</head>
<body>
    <p>之前的段落，不会添加背景颜色。</p>
    <div>
        <p>段落 1。在 div 中。</p>
        <p>段落 2。在 div 中。</p>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

展示效果:

# 2.5 并集选择器

语法 : 选择器1, 选择器2, ... { 样式声明 }

作用 : 选择多个元素，并应用相同的样式。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>并集选择器示例</title>
    <style>
        /* 并集选择器，选中所有 ol li 和 ul li 元素 */
        ol li, ul li {
            color: red; /* 将文字颜色设置为红色 */
        }
    </style>
</head>
<body>
    <ul>
        <li>张三</li>
    </ul>
    <ol>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2.6 伪类选择器

伪类选择器用于选择不同状态下的元素，例如鼠标悬停或点击状态。常见的伪类选择器包括 :hover 和 :active。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类选择器示例</title>
    <style>
        /* 伪类选择器 - 鼠标悬停的效果 */
        div:hover {
            color: green; /* 鼠标悬停时，将文字颜色设置为绿色 */
        }
        /* 伪类选择器 - 鼠标按下的效果 */
        div:active {
            color: blue; /* 鼠标按下时，将文字颜色设置为蓝色 */
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 2.7 选择器优先级

选择器的优先级决定了当多个选择器作用于同一个元素时，哪个选择器的样式会被应用。优先级顺序如下：

内联样式（例如，style="color:red"）
id 选择器（例如，#example）
类选择器（例如，.example）、属性选择器（例如，input[type="text"]）和伪类选择器（例如，:hover）
元素选择器（例如，div）和伪元素选择器（例如，::before）
通配符选择器（例如，*）

注意: 如果选择器的优先级相同，则后定义的选择器优先级更高。

# 2.7 选择器总结

选择器类型	作用	注意事项
元素选择器	选中所有相同标签	不能差异化
类选择器	选中所有具有特定 class 的元素	可以应用于多个元素
id 选择器	选中具有特定 id 的元素	id 必须唯一
通配符选择器	选中所有元素	通常用于重置或清除样式
后代选择器	选中所有在祖先元素内的后代元素	后代元素可以是任意层级的子元素
子选择器	选中所有在父元素内的直接子元素	只选取直接子元素，不选取孙子元素及更深层级的元素
相邻兄弟选择器	选中紧接在另一个元素后的相邻兄弟元素	二者必须有相同的父元素
后续兄弟选择器	选中所有在前一个元素之后的相邻兄弟元素	二者必须有相同的父元素
并集选择器	选中多个选择器指定的元素，并应用相同的样式	选择器之间用逗号分隔
伪类选择器	选中不同状态下的元素，例如鼠标悬停或点击状态	常见的伪类选择器包括 `:hover` 和 `:active`

# 3. 属性和值选择器

属性选择器与基本选择器（元素选择器、类选择器、id选择器）和复合选择器（后代选择器、子元素选择器、相邻兄弟选择器、后续兄弟选择器）之间的区别主要在于它们选择元素的方式。

基本选择器：
- 元素选择器：通过元素名选择。
- 类选择器：通过类名选择。
- ID选择器：通过唯一的ID选择。
- 通配符选择器：选择所有元素。
组合选择器：
- 后代选择器：选择某元素的所有后代元素。
- 子元素选择器：选择某元素的直接子元素。
- 相邻兄弟选择器：选择紧接在某元素后的兄弟元素。
- 后续兄弟选择器：选择某元素之后的所有兄弟元素。
属性选择器：
- 选择包含某些属性的元素，或者根据属性值选择元素。

# 3.1 属性选择器

属性选择器通过元素的属性进行选择。例如，下面的代码选择了所有包含 title 属性的元素，并将其文本颜色设置为蓝色。

<!DOCTYPE html>
<html>
<head>
<style>
/* 选择所有包含 title 属性的元素 */
[title] {
    color: blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="http://www.runoob.com/">runoob.com</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

展示效果:

# 3.2 属性和值选择器

属性和值选择器通过特定属性和值进行选择。例如，下面的代码选择了 title 属性值为 runoob 的元素，并设置了其边框样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
/* 选择 title 属性值为 runoob 的元素 */
[title=runoob] {
    border: 5px solid green;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<img title="runoob" src="logo.png" width="270" height="50" />
<br>
<a title="runoob" href="http://www.runoob.com/">runoob</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="runoob" href="http://www.runoob.com/">runoob</a>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

展示效果:

# 3.3 属性和值的选择器 - 多值

通过属性和值选择器选择包含特定值的属性。使用 ~ 符号表示属性值中包含指定值的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
/* 选择 title 属性值包含 hello 的元素 */
[title~=hello] {
    color: blue;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

展示效果:

# 3.4 表单样式

通过属性选择器为特定类型的输入元素设置样式。例如，下面的代码为 type="text" 和 type="button" 的输入元素设置了样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>  
<style>
/* 选择 type 属性值为 text 的 input 元素 */
input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}
/* 选择 type 属性值为 button 的 input 元素 */
input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}
</style>
</head>
<body>
<form name="input" action="demo-form.php" method="get">
    Firstname:<input type="text" name="fname" value="Peter" size="20">
    Lastname:<input type="text" name="lname" value="Griffin" size="20">
    <input type="button" value="Example Button">
</form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

展示效果:

# 3.5 属性选择器与其他选择器的区别

属性选择器 允许通过元素的属性进行选择，而不是仅仅通过元素类型、类名或 ID。这使得可以更灵活地选择特定的元素，例如表单控件、带有特定属性的链接等。
基本选择器（元素、类、ID）是通过元素类型或元素的类名、ID 进行选择，常用于大多数的样式定义。
组合选择器（后代、子元素、相邻兄弟、后续兄弟）是基于元素之间的关系进行选择，适用于需要选择特定层级关系的元素。

使用建议:

属性选择器 常用于需要精确选择带有特定属性的元素，例如表单控件、带有特定属性的链接等。
基本选择器 适用于大多数样式定义，特别是当元素有明显的类型或类名时。
组合选择器 在处理复杂布局和层级关系时非常有用。

# 4. 分组和嵌套选择器

# 4.1 分组选择器

在样式表中有很多具有相同样式的元素。为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。

示例

h1 {
    color:green;
}
h2 {
    color:green;
}
p {
    color:green;
}

1
2
3
4
5
6
7
8
9

使用分组选择器后的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
/* 使用分组选择器，将 h1, h2, p 选择器合并 */
h1, h2, p {
    color:green; /* 设置文本颜色为绿色 */
}
</style>
</head>
<body>
<h1>Hello World!</h1> <!-- h1元素应用绿色文本 -->
<h2>Smaller heading!</h2> <!-- h2元素应用绿色文本 -->
<p>This is a paragraph.</p> <!-- p元素应用绿色文本 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 4.2 嵌套选择器

嵌套选择器可以应用于选择器内部的选择器样式。

示例

在下面的例子中，设置了四个样式：

p { }: 为所有 p 元素指定一个样式。
.marked { }: 为所有 class="marked" 的元素指定一个样式。
.marked p { }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked { }: 为所有 class="marked" 的 p 元素指定一个样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
/* 为所有 p 元素指定样式 */
p {
    color:blue; /* 设置文本颜色为蓝色 */
    text-align:center; /* 设置文本居中对齐 */
}

/* 为所有 class="marked" 的元素指定样式 */
.marked {
    background-color:red; /* 设置背景颜色为红色 */
}

/* 为 class="marked" 元素内的 p 元素指定样式 */
.marked p {
    color:white; /* 设置文本颜色为白色 */
}

/* 为 class="marked" 的 p 元素指定样式 */
p.marked {
    text-decoration:underline; /* 设置文本带下划线 */
}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p> <!-- 应用 p 元素的样式 -->

<div class="marked">
    <p>这个段落不是蓝色文本。</p> <!-- 应用 .marked p 的样式 -->
</div>

<p>所有 class="marked" 元素内的 p 元素指定一个样式，但有不同的文本颜色。</p> <!-- 应用 p 元素的样式 -->

<p class="marked">带下划线的 p 段落。</p> <!-- 应用 p.marked 的样式 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

分组选择器：
- 分组选择器减少了重复代码的书写，使代码更加简洁。
- 示例中 h1, h2, p { color:green; } 表示将所有 h1, h2, p 元素的文本颜色设为绿色。
嵌套选择器：
- 嵌套选择器用于更精细地控制特定元素的样式。
- .marked p { color:white; } 表示只为 .marked 内部的 p 元素设定样式。
- p.marked { text-decoration:underline; } 表示只有 class 为 marked 的 p 元素才会有下划线样式。

编辑此页

上次更新: 2025/01/25, 22:32:05

← CSS 引入的方式 CSS 背景样式设置→