CSS 分组和嵌套选择器

# CSS 分组和嵌套选择器

# 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

# 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 元素才会有下划线样式。

通过以上示例，可以看到分组选择器和嵌套选择器的使用，使得 CSS 代码更加灵活和可读。通过合理使用这些选择器，可以更高效地管理和维护样式表。

编辑此页

上次更新: 2024/12/28, 18:32:08

← CSS 选择器 CSS 背景→