跟着 MDN 学CSS day_2：（连接样式表与选择器的实战艺术）

在上一篇文章中，我们揭开了 CSS 的神秘面纱，理解了它的核心使命与基本语法，并沉醉于色彩世界的无穷变化。今天，我们将卷起袖子，真正动手将 CSS 与 HTML 连接起来，并深入学习 CSS 中最具威力的武器------选择器。通过选择器，我们能够像一位精准的指挥官，对页面中的任何一个或一组元素发号施令，让样式精确地落在我们期望的地方。准备好，让我们从一份朴素的 HTML 文档开始，一步步将它装扮得焕然一新。

一、一切的起点：准备 HTML 文档

任何 CSS 实战都离不开一个结构良好的 HTML 文档作为舞台。让我们先搭建好这个舞台。请在你的电脑上创建一个名为 index.html 的文件，并填入以下内容。这个文档包含了一个一级标题、几个段落（其中包含 <span> 和 <a> 元素）、一个无序列表等，足够我们施展拳脚。

html 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>开始学习 CSS</title>
  </head>

  <body>
    <h1>我是一级标题</h1>

    <p>
      这是一个段落文本。在文本中有一个 <span>span element</span> 并且还有一个
      <a href="http://example.com">链接</a>.
    </p>

    <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

    <ul>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 <em>三</em></li>
    </ul>
  </body>
</html>

此刻，如果你在浏览器中打开它，看到的将是浏览器默认的样式：大号加粗的标题、有间距的段落、带下划线的蓝色链接和带项目符号的列表。这，就是我们即将改造的原型。

二、建立连接：将 CSS 链接到 HTML

要让我们的 CSS 代码对这份 HTML 文档生效，首先需要建立一个连接通道。虽然存在内联样式和内部样式表等方法，但外部样式表是最普遍、最有用且最利于维护的方式，它将 CSS 代码保存在独立的 .css 文件中。

首先，在与 index.html 相同的文件夹下，创建一个新文件并命名为 styles.css。然后，我们需要在 HTML 的区域中，使用元素告诉浏览器去哪里寻找这个 CSS 文件。

html 复制代码

<link rel="stylesheet" href="styles.css" />

rel="stylesheet" 属性指明了链接的文档是一个样式表。

href="styles.css" 属性则指定了样式表文件的路径。

现在，让我们来验证连接是否成功。在 styles.css 文件中写入以下规则并保存：

css 复制代码

h1 {
  color: red;
}

刷新浏览器，如果你的大标题变成了红色，恭喜你，CSS 和 HTML 已经成功握手！这是你迈出的第一步，也是至关重要的一步。

三、初试牛刀：样式化 HTML 元素

一旦连接建立，我们就可以通过元素选择器来选中并样式化任何 HTML 标签。元素选择器直接使用标签名，简单直接。例如，若你想让文档中所有的段落文字都变为绿色，只需这样做：

css 复制代码

p {
  color: green;
}

这个规则会命中页面里每一个

元素。如果你想同时为多个不同的元素应用同一样式，可以用逗号将它们的选择器隔开，形成一个"选择器组"。

css 复制代码

p, li {
  color: green;
}

现在，文档中所有的段落和所有的列表项文字，都会一起变成绿色。这就是元素选择器的力量，它能让你对某一类元素进行全局性的样式声明，高效且统一。

四、拨乱反正：改变元素的默认行为

还记得我们之前提过的"浏览器默认样式"吗？虽然它们确保了基本的可读性，但有时确实会显得有些碍事。例如，无序列表 <ul> 的列表项 <li> 前面默认会带有项目符号（小黑点）。如果我们想要一个干净的无符号列表，CSS 可以轻松拨乱反正。

通过 list-style-type 属性，我们可以改变甚至移除列表项前的标记。

css 复制代码

li {
  list-style-type: none;
}

将这条规则加入你的样式表，列表前的项目符号就会瞬间消失。不仅如此，list-style-type 属性还支持许多其他值，比如 square（实心方块）、circle（空心圆）、decimal（数字）等。你可以查阅 MDN 文档，探索更多可能性，将默认样式改造成你真正想要的样子。

五、精细化控制：使用类名（Class）

元素选择器虽好，但它过于"一视同仁"。如果我们只想让文档中某几个特定的元素应用特殊样式，该怎么办？答案就是类选择器。

首先，你需要在 HTML 中给你想要特殊对待的元素添加 class 属性。比如，我们给列表中的第二个项目赋予一个名为 special 的类。

html 复制代码

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

然后，在 CSS 中，我们通过一个点号 . 加上类名来选中这个类。

css 复制代码

.special {
  color: orange;
  font-weight: bold;
}

这个 .special 选择器会选中所有具有 class="special" 属性的元素，无论它是 <li>、<span> 还是其他任何标签，并让它们变得又橙又粗。你可以把 special 类添加到段落里的 <span> 上试试，效果立竿见影。

有时，你只想让带有这个类的特定元素应用样式。此时，可以将元素选择器和类选择器连写，中间不能有空格，例如 li.special。

css 复制代码

li.special {
  color: orange;
  font-weight: bold;
}

这条规则的意思是："只选中那些具有 special 类的

元素"。这样一来，即使标签上也有 special 类，它也不会受影响。这种组合方式为我们的样式控制带来了更高的精确度。

六、位置为王：根据元素在文档中的位置确定样式

CSS 的强大之处还在于，它能根据元素在 DOM 树中的位置关系来应用样式。这完全不需要修改 HTML 代码，只通过选择器的组合来描述这种关系。

后代选择器：如果你想选中嵌套在某个元素内部的另一个元素，只需在两个选择器之间加一个空格。例如，以下规则会将

元素内部（作为其后代）的所有 元素变为紫色。

css 复制代码

li em {
  color: rebeccapurple;
}

在我们的文档中，只有第三个列表项项目 <em>三</em> 中的 <em> 会变紫，而段落中的 <em> 则不受影响。

相邻兄弟选择器：如果你想选中紧接在某个元素之后、且与它同级的另一个元素，可以在两者之间使用 + 号。例如，下面的规则会选中紧跟在 h1> 后面的第一个 <p> 元素，并将其字体放大。

css 复制代码

h1 + p {
  font-size: 200%;
}

在我们的文档中，只有第一个段落（"这是一个段落文本..."）会被放大，因为它是唯一紧跟在 <h1> 后面的 <p> 元素。这种基于位置关系的选择能力，让我们在构建复杂布局和精细化排版时如虎添翼。

七、状态之变：根据状态确定样式

网页元素并非静止不动的，它们常常会响应用户的操作而改变状态。最典型的例子就是超链接。一个链接可能处于未访问、已访问、鼠标悬停或键盘聚焦等多种状态。CSS 允许我们通过伪类选择器来针对这些不同状态设定样式。

:link 选择所有尚未被访问的链接。

:visited 选择所有已被访问过的链接。

:hover 选择鼠标指针悬停在其上的链接。

css 复制代码

a:link {
  color: pink;
}

a:visited {
  color: green;
}

a:hover {
  text-decoration: none;
}

上述代码设置了：未访问的链接为粉色，已访问的变为绿色，当鼠标悬停时，下划线消失。通过为不同状态提供视觉反馈，我们极大地增强了用户的交互体验。需要注意的是，在追求美观的同时，务必保证链接的可识别性，这是网页无障碍访问的重要原则。不要因为移除了所有状态下的下划线，而让用户无法分辨哪些文字是可点击的。

八、组合出拳：同时使用选择器和选择符

真正的 CSS 高手懂得如何将这些简单的选择器组合起来，形成一条复杂而精准的"选择符链"，直指目标元素。这种组合赋予了 CSS 惊人的表现力。

css 复制代码

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

让我们来解读一下这个"组合拳"：

body：从文档的 <body> 元素开始。

h1：寻找其后代中的 <h1> 元素。

+ p：然后找到紧跟在 <h1> 后面的兄弟 <p> 元素。

.special：最后，选中这个 <p> 元素内部所有带有 special 类的后代元素。

这条规则精准地命中了我们文档中第一段里的 span element，并为其应用了黄字黑底加内边距的样式。虽然初看可能有些复杂，但请放心，随着实践的增多，你会越来越习惯这种组合逻辑，并最终能够信手拈来。

总结

在第二天的学习中，我们从零开始，掌握了将外部 CSS 样式表链接到 HTML 文档的核心方法。我们实践了多种强大的选择器，从全局铺开的元素选择器，到定点清除的类选择器，再到描述关系和状态的后代、相邻兄弟选择器及伪类选择器。最后，我们甚至学会了将它们组合成"选择符链"，实现对页面元素的精确制导。

这些选择器是 CSS 的灵魂，是我们与 HTML 文档进行对话的语法。理解并熟练运用它们，是通往 CSS 精通之路的必修课。今天的内容信息量很大，但都围绕着一个核心思想：更精准地选中目标元素。掌握了它，你就握住了控制网页视觉表现的权杖。在下一篇文章中，我们将深入探讨样式表本身的结构，理解层叠与继承等核心概念，让我们的 CSS 代码更加清晰、高效和可维护。

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