跟着 MDN 学CSS day_9：（深入掌握CSS选择器核心技能测试）

在Web开发的学习路径中，CSS选择器 是构建一切样式体系的基石。无论你是刚入门的新手，还是有一定经验的开发者，对选择器的理解深度直接决定了你能否高效、精准地控制页面元素的样式表现。MDN Web 文档提供了一套经典的"技能测试：选择器"练习，涵盖了从基础类型选择器 到复杂属性选择器的五个任务。本文将带领你逐一攻克这些任务，在每个知识点下提供详细的讲解和示例代码，帮助你系统性地巩固CSS选择器的核心用法。

任务一：基础类型选择器的精准运用

CSS中最基础的构建块是类型选择器，它们允许你直接根据HTML标签名称来选取元素。虽然简单，但它们是所有复杂选择器的根基。任务一的目的正是让你熟悉如何在不修改HTML结构的前提下，单纯依靠类型选择器来改变元素的视觉呈现。

1.1 将 `<h1>` 标题变为蓝色

这里我们直接使用元素选择器 h1，并将其 color 属性设置为蓝色。h1 作为页面中最顶层的标题，通常需要醒目的颜色，但同时又不应过度抢夺视觉焦点，蓝色是一个平衡的选择。

css 复制代码

h1 {
  color: blue;
}

1.2 让 `<h2>` 标题具备蓝色背景和白色文本

这涉及到两个属性：background-color 控制背景色，color 控制前景文本色。背景和文本之间的对比度是设计中极为关键的因素，蓝色底搭配白色字能产生清晰、现代且可读性强的视觉效果。

css 复制代码

h2 {
  background-color: blue;
  color: white;
}

1.3 把位于 `<span>` 标签内的文本放大到200%

<span> 本身是一个无语义的行内容器，往往用于包裹需要特殊样式处理的小段文字。这里将其字体大小设置为 200%，意味着它会基于父元素的字体尺寸进行翻倍。选择 font-size 属性并使用百分比值能够保持一定的缩放灵活性。

css 复制代码

span {
  font-size: 200%;
}

💡 总结：通过这三个简单的样式声明，你就可以在不接触HTML的情况下，快速地为页面建立层次分明的标题和重点文字样式。这种直接使用标签名作为选择器的方式，代码清晰且意图明确，是日常开发中使用频率最高的基础技巧。

任务二：类选择器、ID选择器与多类组合

当一个页面结构变得稍微复杂时，单纯的类型选择器就难以满足精确控制的需求。此时，类选择器 和ID选择器 开始发挥作用。任务二设计了一系列要求，帮助你理解如何通过 class 和 id 进行元素定位，并且特别强调了多类组合选择器的用法。

2.1 为 id 属性值为 special 的元素设置黄色背景

在HTML中，id 具有唯一性，因此 #special 选择器能够极其精准地定位到那一个特定的 <h2> 元素。ID选择器的优先级高于类选择器，因此适合用于标识页面中独一无二的模块。

css 复制代码

#special {
  background-color: yellow;
}

2.2 为所有带有 alert 类的元素添加灰色实线边框

这里的 .alert 类选择器会匹配所有包含该类的元素，无论它们是 <span> 还是其他标签。边框样式的设置可以有效地在视觉上划定元素的边界，起到警示或强调的作用。

css 复制代码

.alert {
  border: 2px solid grey;
}

2.3 同时属于 alert 和 stop 类的元素背景变为红色

在CSS中，将两个类选择器紧挨着书写且中间没有空格（即 .alert.stop），其含义是**"同时拥有这两个类的元素"**。这要求元素在HTML中的 class 属性里必须同时包含这两个单词。

css 复制代码

.alert.stop {
  background-color: red;
}

2.4 同时拥有 alert 和 go 类的元素背景变为绿色

这种链式类选择器的写法不关心元素的标签类型，只关注它所携带的类名组合，这为构建高度可复用的样式模块提供了强大的支持。例如，一个基础样式类可以定义边框和内外边距，而另一个状态类则可以动态地修改背景或文本颜色。

css 复制代码

.alert.go {
  background-color: green;
}

🎯 深入理解：深入理解这种多类组合机制，能够让你的CSS代码量显著减少。你不必为每一种状态组合都写一个全新的类，而是可以像搭积木一样，通过组合不同的基础类来构建丰富的界面表现。这种思路在现代CSS架构（如工具类优先的框架）中体现得尤为深刻。

任务三：伪类选择器与结构化伪类的实际应用

CSS的动态伪类 和结构化伪类 赋予了页面与用户交互的能力以及更精细的内容排版控制力。任务三重点考察了链接伪类（:link、:visited、:hover）以及 :first-child、:first-line 和 :nth-child() 等结构化伪类，这是通往富有交互性和良好阅读体验的关键一步。

3.1 设置链接样式

未访问过的链接需要显示为橙色，这通过 a:link 选择器来实现。一旦用户点击并访问过该链接，其状态变为 :visited，我们将其颜色变为绿色，以此向用户传达已浏览过的信息。当鼠标悬停在链接上时，:hover 伪类生效，移除下划线文本装饰，提供即时的视觉反馈。

css 复制代码

a:link {
  color: orange;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

3.2 为容器内的第一个元素设置特殊样式

任务要求为容器内的第一个元素设置字体大小为150%，并将其第一行文字变为红色。这里可以使用 :first-child 来定位，而将第一行文字设为红色则需要用到 ::first-line 伪元素，它能够自动适配第一行文字的结尾位置，无论容器宽度如何变化。

css 复制代码

.container > *:first-child {
  font-size: 150%;
}

.container > *:first-child::first-line {
  color: red;
}

3.3 为表格添加条纹效果

使用 :nth-child(even) 或 :nth-child(odd) 伪类可以非常优雅地选取表格的偶数行或奇数行，然后为它们设置深色背景和白色前景色，从而形成清晰的斑马条纹。这种条纹设计极大地提升了表格横向阅读的引导性，减少视线跳跃出错的可能。

css 复制代码

tr:nth-child(even) {
  background-color: #333;
  color: white;
}

🌟 能力边界：从链接的交互状态到文本首行的精准控制，再到表格的模式化样式，伪类和伪元素扩展了选择器的能力边界，让你能够基于元素在文档中的位置、状态甚至是文本内容的一部分来设定样式，这是纯静态类选择器无法做到的。

任务四：相邻兄弟选择器与子元素深度控制

当你需要根据元素之间的关系来施加样式时，组合器 就成为了不可或缺的工具。任务四集中练习了**相邻兄弟组合器（+）**以及子元素选择器和后代选择器的区别，这将教会你如何通过元素在DOM树中的位置关系来建立样式逻辑。

4.1 紧跟在 `<h2>` 元素之后的第一个段落文字变为红色

这里必须使用相邻兄弟组合器 h2 + p。它的意思是**"选择所有紧接在 <h2> 元素之后出现的第一个 <p> 元素"**，这两个元素必须具有相同的父元素，且 <p> 必须是紧接着 <h2> 的下一个兄弟。

⚠️ 重要区别 ：这与后续兄弟组合器 （h2 ~ p）有着严格的区别，后者会选择 <h2> 之后所有的 <p> 兄弟，而 + 只选第一个。

css 复制代码

h2 + p {
  color: red;
}

4.2 针对拥有 list 类的无序列表进行样式控制

需要移除其子元素的项目符号，并只为其直接的子元素（即一级列表项）添加1像素的灰色下边框。

📝 实现要点：

移除子元素的项目符号：为直接子元素 <li> 设置 list-style-type: none;

只为一级 <li> 添加下边框：使用子元素组合器 ul.list > li

css 复制代码

ul.list > li {
  list-style-type: none;
  border-bottom: 1px solid grey;
}

🔍 关键区分 ：这段代码精确地诠释了**"子元素"与 "后代元素"**的差异。如果你错误地使用了空格后代选择器 ul.list li，那么嵌套列表 <ul> 内部的 <li>2.1</li> 和 <li>2.2</li> 也会失去项目符号并获得边框，这很可能违背了你的设计初衷。
💡 防御性CSS：深入领会相邻兄弟选择器和子元素选择器，能够帮助你编写出防御性更强、更不容易因HTML结构调整而失效的CSS规则。

任务五：属性选择器的进阶过滤技巧

当元素没有明确的类名或ID，或者你需要根据HTML标签自带属性的具体值来区分样式时，属性选择器 就展现出了它强大的威力。任务五将带你依次实践存在性选择器 、包含值选择器 和起始值选择器，让你掌握对链接进行精细分类和样式化的一把利器。

📝 预设样式 ：所有待处理的 <a> 元素都已预设了一个5像素宽的灰色实线边框，我们的任务是根据不同的属性条件来覆盖边框颜色。

5.1 选择带有 title 属性的 `<a>` 元素，边框颜色变为粉色

这里使用 a[title] 选择器，它只关心 title 属性是否存在，而不在乎它的值是什么。页面中任何被赋予了额外提示信息的链接，都会因此获得一个粉色边框，从视觉上提示用户这里存在补充说明。

css 复制代码

a[title] {
  border-color: pink;
}

5.2 选取 href 属性值中包含 contact 一词的链接，边框设置为橙色

这里采用 a[href*="contact"] 选择器，其中的星号 *= 表示属性值中包含该子串即可 。无论是绝对路径 /contact 还是相对路径 ../contact/index.html，只要字符串中出现了 contact，这个选择器就能捕获到。这是一种基于语义片段的模糊匹配，非常适合根据URL关键字来高亮导航或特定功能区。

css 复制代码

a[href*="contact"] {
  border-color: orange;
}

5.3 选取 href 属性值以 https 开头的链接，边框变为绿色

这通过 a[href^="https"] 完成，其中 ^= 符号代表起始值匹配 。这能有效地区分出使用了安全超文本传输协议的外部链接，并给予它们独特的绿色边框标识。相比于针对 http 协议的站点，https 的标识往往能给用户带来更多的安全信赖感。

css 复制代码

a[href^="https"] {
  border-color: green;
}

总结

通过这五种任务中涉及的选择器练习，你已经从简单的类型匹配，穿越了类与ID的精准定位，领略了伪类与伪元素的动态和结构化能力，掌握了元素间关系的组合技法，并最终触及了属性值的深度筛选。

任务	核心知识点	选择器类型
任务一	基础类型选择器	`h1`、`h2`、`span`
任务二	类、ID与多类组合	`.class`、`#id`、`.a.b`
任务三	伪类与结构化伪类	`:link`、`:hover`、`:nth-child()`、`::first-line`
任务四	兄弟与子元素组合器	`h2 + p`、`ul > li`
任务五	属性选择器进阶	`[title]`、`[href*=""]`、`[href^=""]`

🚀 持续精进：持续在不同场景下有意识地运用这些选择器，你将在应对复杂页面布局和交互样式时更加游刃有余。

还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！

跟着 MDN 学CSS day_9：（深入掌握CSS选择器核心技能测试）

任务一：基础类型选择器的精准运用

1.1 将 <h1> 标题变为蓝色

1.2 让 <h2> 标题具备蓝色背景和白色文本

1.3 把位于 <span> 标签内的文本放大到200%

任务二：类选择器、ID选择器与多类组合

2.1 为 id 属性值为 special 的元素设置黄色背景

2.2 为所有带有 alert 类的元素添加灰色实线边框

2.3 同时属于 alert 和 stop 类的元素背景变为红色

2.4 同时拥有 alert 和 go 类的元素背景变为绿色

任务三：伪类选择器与结构化伪类的实际应用

3.1 设置链接样式

3.2 为容器内的第一个元素设置特殊样式

3.3 为表格添加条纹效果

任务四：相邻兄弟选择器与子元素深度控制

4.1 紧跟在 <h2> 元素之后的第一个段落文字变为红色

4.2 针对拥有 list 类的无序列表进行样式控制

任务五：属性选择器的进阶过滤技巧

5.1 选择带有 title 属性的 <a> 元素，边框颜色变为粉色

5.2 选取 href 属性值中包含 contact 一词的链接，边框设置为橙色

5.3 选取 href 属性值以 https 开头的链接，边框变为绿色

总结

1.1 将 `<h1>` 标题变为蓝色

1.2 让 `<h2>` 标题具备蓝色背景和白色文本

1.3 把位于 `<span>` 标签内的文本放大到200%

4.1 紧跟在 `<h2>` 元素之后的第一个段落文字变为红色

5.1 选择带有 title 属性的 `<a>` 元素，边框颜色变为粉色