CSS - 选择器：通往时尚网页的大门
你好，未来的网页设计巨星！我很高兴能成为你在这个激动人心的CSS选择器世界中的向导。作为一个教授计算机科学超过十年的老师，我可以告诉你，掌握选择器就像打开了一个网页设计宝藏的宝箱。那么，让我们跳进去，让你的网页大放异彩！
选择器类型
在我们开始冒险之前，让我们快速了解一下我们将要探索的不同类型的选择器：
| 选择器类型 | 示例 | 描述 |
|---|---|---|
| 通用 | * | 选择所有元素 |
| 元素 | p | 选择所有 元素 |
| 类 | .classname | 选择 class="classname" 的元素 |
| ID | #idname | 选择 id="idname" 的元素 |
| 属性 | [attribute] | 选择具有指定属性的元素 |
| 组 | selector1, selector2 | 选择匹配任一选择器的所有元素 |
| 伪类 | :hover | 选择处于特定状态的元素 |
| 伪元素 | ::first-line | 选择元素的一部分 |
| 后代 | div p | 选择 div 元素内的所有 元素 |
| 子元素 | div > p | 选择父元素为 div 的所有 元素 |
| 相邻兄弟 | div + p | 选择紧随 div 元素之后的第一个 元素 |
| 一般兄弟 | div ~ p | 选择与 div 元素同级的所有 元素 |
现在，让我们详细探索每一个！
CSS 通用选择器
通用选择器就像是CSS的瑞士军刀——它选择所有东西！它的表示符号是一个星号（*）。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}这段代码重置了所有元素的边距和内边距，并设置了 box-sizing 属性。它通常在样式表的开始处使用，以创建一个干净的工作环境。
CSS 元素选择器
元素选择器目标特定的HTML元素。它们简单但强大。
p {
font-size: 16px;
line-height: 1.5;
}
h1 {
color: #333;
font-family: 'Arial', sans-serif;
}在这里，我们设置了所有
元素的字体大小为16像素，行高为1.5。我们还设置了所有
元素的字体颜色为深灰色，并将字体设置为Arial。
CSS 类选择器
类选择器非常灵活。它们允许你将样式应用到具有相同类的多个元素上。
.highlight {
background-color: yellow;
font-weight: bold;
}
.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}在这个示例中，任何具有 class="highlight" 的元素都将有一个黄色背景和加粗文本。具有 class="error-message" 的元素将以红色显示，并带有红色边框和一些内边距。
CSS ID选择器
ID选择器用于样式化一个单一且独特的元素。它们前面有一个井号（#）符号。
#header {
background-color: #f0f0f0;
padding: 20px;
}
#main-content {
max-width: 800px;
margin: 0 auto;
}这段代码样式化了具有 id="header" 的元素和具有 id="main-content" 的元素。记住，ID在页面中应该是唯一的！
CSS 属性选择器
属性选择器根据元素的属性或属性值来目标元素。
[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
[href^="https"] {
color: green;
}
[class*="btn"] {
cursor: pointer;
}在这里，我们样式化了所有 type="text" 的元素、以 "https" 开头的链接，以及类名包含 "btn" 的元素。
CSS 组选择器
组选择器允许你对多个选择器应用相同的样式。它们用逗号分隔。
h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}
.error, .warning {
font-weight: bold;
}这段代码将相同的字体家族和颜色应用到 h1、h2 和 h3 元素上，并使 .error 和 .warning 类都加粗。
CSS 伪类选择器
伪类选择器目标处于特定状态的元素。
a:hover {
text-decoration: underline;
}
input:focus {
outline: 2px solid blue;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}这些样式会在鼠标悬停时给链接添加下划线，给聚焦的输入框添加蓝色轮廓，以及给每个奇数列表项添加浅灰色背景。
CSS 伪元素选择器
伪元素选择器允许你样式化元素的具体部分。
p::first-letter {
font-size: 2em;
font-weight: bold;
}
h1::before {
content: "? ";
}
div::selection {
background-color: yellow;
}这段代码放大并加粗了段落的第一个字母，给 h1 元素之前添加了一个指向手指表情符号，并将 div 中选中的文本背景设置为黄色。
CSS 后代选择器
后代选择器目标另一个元素的后代。
article p {
line-height: 1.6;
}
.container .box {
border: 1px solid #ccc;
}在这里，我们样式化了文章中的所有段落，以及类名为 "box" 且位于类名为 "container" 的元素内的所有元素。
CSS 子元素选择器
子元素选择器目标一个元素的直接子元素。
ul > li {
list-style-type: square;
}
div > p {
margin-bottom: 10px;
}这段代码给无序列表的直接子列表项添加了方形项目符号，并为 div 的直接子段落添加了下边距。
CSS 相邻兄弟选择器
相邻兄弟选择器目标紧随另一个元素之后的元素。
h1 + p {
font-size: 1.2em;
font-weight: bold;
}
.button + .button {
margin-left: 10px;
}在这里，我们使紧随 h1 元素之后的第一个段落的字体变大并加粗，并为紧随其他按钮之后的按钮添加了左边距。
CSS 一般兄弟选择器
一般兄弟选择器目标另一个元素的兄弟元素，即使它们不是紧邻的。
h1 ~ p {
color: #666;
}
.highlight ~ li {
font-style: italic;
}这段代码改变了所有与 h1 元素同级的段落的颜色，并使紧随类名为 "highlight" 的元素之后的列表项斜体。
CSS 嵌套选择器
嵌套选择器允许你通过在彼此之间嵌套选择器来编写更简洁、更易读的CSS。
.container {
max-width: 1200px;
margin: 0 auto;
.header {
background-color: #f0f0f0;
padding: 20px;
h1 {
color: #333;
}
}
.content {
padding: 20px;
p {
line-height: 1.6;
}
}
}这种嵌套结构清楚地展示了元素之间的关系，使CSS更具组织性。
CSS嵌套选择器的特点
- 提高可读性：嵌套反映了你的HTML结构。
- 减少重复：你不需要重复父选择器。
- 更易于维护：对父选择器的更改会自动应用到嵌套选择器。
- 范围限制：样式自然地限定在其父级上下文中。
记住，尽管嵌套可以很强大，但不要嵌套得太深，否则会使你的CSS难以理解和维护。
那么，我热切的网页设计学徒，你就完成了CSS选择器的旋风之旅。有了这些工具，你已经走上了创建美丽网页的道路。记住，熟能生巧，所以不要害怕尝试不同的选择器和组合。快乐编码！
Credits: Image by storyset