CSS选择器 - Ivo's Inkwell

回顾与引言#

在上一篇教程中，我们学习了HTML的基础知识，创建了第一个网页并添加了基本样式。今天我们将深入探索CSS的核心——选择器系统，这是精确控制网页样式的关键！通过本教程，你将学会如何像专业开发者一样精确地定位和美化网页元素。

第一部分：CSS选择器深度解析#

为什么选择器如此重要？#

选择器是CSS的”定位系统”，它决定了哪些HTML元素会应用特定的样式规则。掌握选择器，你就获得了精确控制网页外观的能力。

基础选择器：CSS的基石#

1. 元素选择器#

1
/* 选择所有段落 */
2
p {
3
  color: #333;
4
  line-height: 1.6;
5
}
6

7
/* 选择所有一级标题 */
8
h1 {
9
  font-size: 2.5rem;
10
  margin-bottom: 1rem;
11
}

2. 类选择器 (最常用)#

1
<!-- HTML -->
2
<button class="btn primary">主要按钮</button>

1
/* CSS */
2
.btn {
3
  padding: 10px 20px;
4
  border-radius: 4px;
5
  cursor: pointer;
6
}
7

8
.primary {
9
  background-color: #007bff;
10
  color: white;
11
}

3. ID选择器#

1
<!-- HTML -->
2
<div id="header">网站头部</div>

1
/* CSS */
2
#header {
3
  background-color: #f8f9fa;
4
  padding: 20px;
5
  border-bottom: 1px solid #dee2e6;
6
}

专业提示：ID选择器具有最高优先级，应谨慎使用，通常用于唯一元素如页面布局区域

组合选择器：精确命中目标#

1. 后代选择器 (空格)#

1
/* 选择article内的所有段落 */
2
article p {
3
  font-size: 1.1rem;
4
}
5

6
/* 选择导航栏内的链接 */
7
nav a {
8
  text-decoration: none;
9
  color: #343a40;
10
}

2. 子元素选择器 (>)#

1
/* 只选择直接子元素 */
2
ul.menu > li {
3
  border-bottom: 1px solid #eee;
4
  padding: 10px 0;
5
}

3. 相邻兄弟选择器 (+)#

1
/* 选择紧跟在h2后面的段落 */
2
h2 + p {
3
  margin-top: 5px;
4
  font-style: italic;
5
}

4. 通用兄弟选择器 (~)#

1
/* 选择所有在h3后面的同级段落 */
2
h3 ~ p {
3
  color: #666;
4
}

属性选择器：按特征选择元素#

1
/* 选择所有有title属性的元素 */
2
[title] {
3
  border-bottom: 1px dotted #999;
4
}
5

6
/* 选择特定属性值的元素 */
7
input[type="submit"] {
8
  background-color: #28a745;
9
  color: white;
10
}
11

12
/* 选择属性值包含特定字符串的元素 */
13
a[href*="example"] {
14
  color: purple;
15
}

伪类选择器：基于状态的样式#

伪类让你可以根据元素状态应用样式：

1
/* 链接状态 */
2
a:link { color: blue; }      /* 未访问链接 */
3
a:visited { color: purple; } /* 已访问链接 */
4
a:hover {
5
  color: red;
6
  text-decoration: underline;
7
} /* 鼠标悬停 */
8
a:active { color: green; }  /* 点击瞬间 */
9

10
/* 表单元素状态 */
11
input:focus {
12
  border-color: #80bdff;
13
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
14
}
15

16
/* 结构化伪类 */
17
li:first-child { font-weight: bold; }
18
li:last-child { border-bottom: none; }
19
li:nth-child(odd) { background-color: #f8f9fa; }
20
tr:nth-child(even) { background-color: #f2f2f2; }

伪元素选择器：创造虚拟元素#

伪元素允许你为元素的特定部分设置样式：

1
/* 首字母样式 */
2
p::first-letter {
3
  font-size: 2em;
4
  float: left;
5
  margin-right: 5px;
6
}
7

8
/* 首行样式 */
9
p::first-line {
10
  font-weight: bold;
11
}
12

13
/* 在元素前/后添加内容 */
14
blockquote::before {
15
  content: """;
16
  font-size: 3em;
17
  color: #ccc;
18
  line-height: 0.1em;
19
}
20

21
a.external::after {
22
  content: " ↗";
23
  font-size: 0.8em;
24
}

第二部分：选择器优先级与最佳实践#

CSS优先级规则#

当多个规则应用于同一元素时，浏览器使用优先级系统决定哪个样式生效：

内联样式 (最高优先级) - style="color: red;"
ID选择器 - #content
类/属性/伪类选择器 - .button, [type="text"], :hover
元素/伪元素选择器 - p, div, ::before

优先级计算技巧#

想象每个选择器有一个分数：

ID选择器: 100分
类/属性/伪类: 10分
元素/伪元素: 1分

示例：

1
#nav .item a:hover  /* 100 + 10 + 1 + 10 = 121分 */
2
.header h1.title     /* 10 + 1 + 10 = 21分 */
3
div p                /* 1 + 1 = 2分 */

CSS选择器最佳实践#

优先使用类选择器：提供良好平衡的特异性和可重用性
避免过度嵌套：.nav ul li a 可能过度指定
保持低特异性：便于覆盖样式
使用有意义的类名：.btn-primary 优于 .blue-button
利用CSS变量：提高可维护性

1
/* 使用CSS变量 */
2
:root {
3
  --primary-color: #4a86e8;
4
  --secondary-color: #6c757d;
5
  --spacing-unit: 8px;
6
}
7

8
.button {
9
  padding: calc(2 * var(--spacing-unit)) calc(4 * var(--spacing-unit));
10
}
11

12
.primary {
13
  background-color: var(--primary-color);
14
}

动手实践：创建个性化博客页面#

让我们应用所学知识，创建一个精美的博客页面：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>我的技术博客</title>
7
    <style>
8
        /* 基础样式 */
9
        :root {
10
            --primary-color: #4a86e8;
11
            --secondary-color: #6c757d;
12
            --light-bg: #f8f9fa;
13
            --dark-text: #212529;
14
            --spacing: 1rem;
15
            --border-radius: 8px;
16
        }
17

18
        * {
19
            box-sizing: border-box;
20
            margin: 0;
21
            padding: 0;
22
        }
23

24
        body {
25
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
            line-height: 1.6;
27
            color: var(--dark-text);
28
            background-color: var(--light-bg);
29
            max-width: 1200px;
30
            margin: 0 auto;
31
            padding: var(--spacing);
32
        }
33

34
        /* 导航栏样式 */
35
        nav {
36
            background-color: white;
37
            padding: var(--spacing);
38
            border-radius: var(--border-radius);
39
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
40
            margin-bottom: calc(2 * var(--spacing));
41
        }
42

43
        nav ul {
44
            display: flex;
45
            list-style: none;
46
        }
47

48
        nav li:not(:last-child) {
49
            margin-right: calc(2 * var(--spacing));
50
        }
51

52
        nav a {
53
            text-decoration: none;
54
            color: var(--secondary-color);
55
            font-weight: 500;
56
            padding: 0.5rem;
57
            position: relative;
58
        }
59

60
        nav a:hover {
61
            color: var(--primary-color);
62
        }
63

64
        nav a::after {
65
            content: '';
66
            position: absolute;
67
            bottom: 0;
68
            left: 0;
69
            width: 0;
70
            height: 2px;
71
            background-color: var(--primary-color);
72
            transition: width 0.3s ease;
73
        }
74

75
        nav a:hover::after {
76
            width: 100%;
77
        }
78

79
        /* 文章卡片 */
80
        .article-card {
81
            background-color: white;
82
            border-radius: var(--border-radius);
83
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
84
            margin-bottom: calc(2 * var(--spacing));
85
            overflow: hidden;
86
            transition: transform 0.3s ease, box-shadow 0.3s ease;
87
        }
88

89
        .article-card:hover {
90
            transform: translateY(-5px);
91
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
92
        }
93

94
        .card-header {
95
            padding: var(--spacing);
96
            border-bottom: 1px solid #eee;
97
        }
98

99
        .card-header h2 {
100
            color: var(--primary-color);
101
            margin-bottom: 0.5rem;
102
        }
103

104
        .meta {
105
            display: flex;
106
            color: var(--secondary-color);
107
            font-size: 0.9rem;
108
        }
109

110
        .meta span:not(:last-child)::after {
111
            content: '•';
112
            margin: 0 0.5rem;
113
        }
114

115
        .card-content {
116
            padding: var(--spacing);
117
        }
118

119
        .card-content p:first-of-type {
120
            font-size: 1.1rem;
121
            margin-bottom: 1rem;
122
        }
123

124
        .read-more {
125
            display: inline-block;
126
            color: var(--primary-color);
127
            text-decoration: none;
128
            font-weight: 600;
129
            margin-top: 0.5rem;
130
        }
131

132
        .read-more::after {
133
            content: '→';
134
            margin-left: 0.3rem;
135
            transition: margin-left 0.2s ease;
136
        }
137

138
        .read-more:hover::after {
139
            margin-left: 0.6rem;
140
        }
141

142
        .tag {
143
            display: inline-block;
144
            background-color: #e9ecef;
145
            color: var(--secondary-color);
146
            padding: 0.25rem 0.75rem;
147
            border-radius: 20px;
148
            font-size: 0.8rem;
149
            margin-right: 0.5rem;
150
        }
151

152
        /* 特色文章 */
153
        .featured {
154
            border-left: 4px solid var(--primary-color);
155
        }
156

157
        /* 页脚样式 */
158
        footer {
159
            text-align: center;
160
            padding: var(--spacing);
161
            color: var(--secondary-color);
162
            font-size: 0.9rem;
163
            margin-top: 2rem;
164
            border-top: 1px solid #dee2e6;
165
        }
166
    </style>
167
</head>
168
<body>
169
    <nav>
170
        <ul>
171
            <li><a href="#">首页</a></li>
172
            <li><a href="#">前端开发</a></li>
173
            <li><a href="#">JavaScript</a></li>
174
            <li><a href="#">CSS技巧</a></li>
175
            <li><a href="#">关于我</a></li>
176
        </ul>
177
    </nav>
178

179
    <main>
180
        <article class="article-card featured">
181
            <div class="card-header">
182
                <h2>CSS选择器完全指南</h2>
183
                <div class="meta">
184
                    <span>2023年10月15日</span>
185
                    <span>张明</span>
186
                    <span>8分钟阅读</span>
187
                </div>
188
            </div>
189
            <div class="card-content">
190
                <p>选择器是CSS中最强大的功能之一，它允许我们精确地定位HTML元素并应用样式。本文将深入探讨各种CSS选择器及其实际应用...</p>
191
                <div>
192
                    <span class="tag">CSS</span>
193
                    <span class="tag">前端开发</span>
194
                    <span class="tag">教程</span>
195
                </div>
196
                <a href="#" class="read-more">阅读全文</a>
197
            </div>
198
        </article>
199

200
        <article class="article-card">
201
            <div class="card-header">
202
                <h2>Flexbox布局实战</h2>
203
                <div class="meta">
204
                    <span>2023年10月10日</span>
205
                    <span>李华</span>
206
                    <span>6分钟阅读</span>
207
                </div>
208
            </div>
209
            <div class="card-content">
210
                <p>Flexbox是CSS3中引入的一种强大的布局模型，它提供了更加有效的方式来设计响应式布局。本文将带你从基础到实战...</p>
211
                <div>
212
                    <span class="tag">CSS</span>
213
                    <span class="tag">布局</span>
214
                    <span class="tag">响应式设计</span>
215
                </div>
216
                <a href="#" class="read-more">阅读全文</a>
217
            </div>
218
        </article>
219

220
        <article class="article-card">
221
            <div class="card-header">
222
                <h2>JavaScript闭包详解</h2>
223
                <div class="meta">
224
                    <span>2023年10月5日</span>
225
                    <span>王芳</span>
226
                    <span>10分钟阅读</span>
227
                </div>
228
            </div>
229
            <div class="card-content">
230
                <p>闭包是JavaScript中一个既强大又容易混淆的概念。理解闭包对于掌握JavaScript至关重要。本文将深入解析闭包的工作原理...</p>
231
                <div>
232
                    <span class="tag">JavaScript</span>
233
                    <span class="tag">核心概念</span>
234
                </div>
235
                <a href="#" class="read-more">阅读全文</a>
236
            </div>
237
        </article>
238
    </main>
239

240
    <footer>
241
        <p>© 2023 我的技术博客 | 使用CSS选择器构建</p>
242
    </footer>
243
</body>
244
</html>

实践任务#

将上述代码复制到HTML文件中并查看效果
尝试以下修改：
- 将特色文章的边框颜色改为绿色
- 为导航栏当前活动项添加特殊样式（如添加 .active 类）
- 修改标签的悬停效果
- 添加新文章并使用不同的选择器为其设置样式
- 尝试使用 :nth-child() 为文章设置交替背景色

总结与预告#

今天，我们深入学习了：

CSS基础选择器（元素、类、ID）
组合选择器（后代、子元素、兄弟）
属性选择器和伪类选择器
选择器优先级规则
CSS最佳实践

在下一篇教程中，我们将探索前端开发的核心概念——盒子模型，内容包括：

盒模型的组成要素（内容、内边距、边框、外边距）
盒子大小的计算方式
使用 box-sizing 控制盒子模型
外边距合并现象及解决方案
创建实际布局组件

挑战任务：在博客页面中添加一个”作者简介”区域，使用组合选择器为其添加样式，并确保在鼠标悬停时有效果变化。

“选择器是CSS的钥匙，打开精确样式控制的大门。多练习，多尝试，你很快就能游刃有余！”

期待在盒子模型的世界与你相见！