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

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

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

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

1.1 将<h1>标题变为蓝色

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

h1{color:blue;}

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

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

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

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

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

span{font-size:200%;}

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

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

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

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

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

#special{background-color:yellow;}

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

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

.alert{border:2px solid grey;}

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

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

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

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

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

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

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

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

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

3.1 设置链接样式

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

a:link{color:orange;}a:visited{color:green;}a:hover{text-decoration:none;}

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

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

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

3.3 为表格添加条纹效果

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

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

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

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

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

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

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

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

h2 + p{color:red;}

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

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

📝实现要点：

• 移除子元素的项目符号：为直接子元素<li>设置list-style-type: none;
• 只为一级<li>添加下边框：使用子元素组合器ul.list > li

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属性是否存在，而不在乎它的值是什么。页面中任何被赋予了额外提示信息的链接，都会因此获得一个粉色边框，从视觉上提示用户这里存在补充说明。

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

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

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

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

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

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

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

总结

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

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

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