如何选择HTML元素以使用CSS设置样式

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

CSS 的核心功能由两个特性执行：cascade 和 specificity。 Cascade 处理如何读取 CSS 属性并将其应用于元素。特异性指示浏览器找到正确的元素并应用样式。特异性的起点是一个选择器，它告诉浏览器要查找什么元素。在样式方面，网页或网站越大，对更具体或更高特异性的选择器的需求就越大。

选择正确的元素并提供正确的视觉样式是编写 CSS 代码的基础。每当您需要调整网页上元素的外观时，使用选择器是关键。

本教程将通过向您展示如何在给定场景中选择正确的元素来构建您的技能并帮助您开发视觉丰富的网站。您将首先使用类型选择器来选择要设置样式的 HTML 元素。然后，您将组合选择器以更精确地识别和应用样式。最后，您将对多个选择器进行分组，以将相同的样式应用于不同的元素。

先决条件

熟悉级联和特异性的概念，因为它们适用于 CSS。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何用 HTML 构建网站系列。
一个名为 styles.css 的空 CSS 文件保存在本地计算机上与 index.html 相同的目录中。

设置 HTML

在这第一步中，您将设置在本教程的其余部分中将设置样式的 HTML。本教程中 HTML 的目的是为样式提供各种元素和情况。

在编辑器中打开 index.html 文件并添加以下样板 HTML 为文件提供必要的基线代码：

索引.html

<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

<link /> 元素已经加载到 styles.css 文件中，因此请务必准备好该文件。

现在，您需要一些内容。首先在 <body> 元素中添加 <header> 和 <article> 元素。在以下代码块中，突出显示的部分将帮助您识别新的或已更改的内容：

索引.html

<!doctype html>
<html>
  ...
  <body>
    <header></header>
    <article></article>
  </body>
</html>

<body> 和 <header> 元素之间的关系称为 parent 和 child，因为 <header> 元素是 [ X151X]嵌套在<body>标签内的。这也意味着 <header> 和 <article> 标签具有 sibling 关系，因为它们在父 [ 中处于相同的嵌套级别X161X] 标签。

接下来，您将在 <header> 中添加一个子元素，以赋予页面标题：

索引.html

...
<header>
  <h1>About Coral Reefs</h1>
</header>
...

在 <article> 内部，添加四个子元素：一个 <header> 元素和三个 <section> 元素。 <article> 元素提供了所谓的 landmark，一个浏览器的名称以帮助那些使用辅助技术的人。地标内应该只有一个 <header>。在这种情况下，<header> 将包含页面中这篇文章的标题。 <section> 元素将包含不同的信息块：

索引.html

...
<article>
  <header></header>
  <section></section>
  <section></section>
  <section></section>
</article>
...

现在，在 <header> 中为 <article> 提供一个标题。在此处使用 <h2>，因为它在逻辑上用作 <body> 的 <header> 下方的二级标题和顶级标题。在“Biodiversity”一词周围添加 <strong> 标签，以强调文本。当您在浏览器中加载 index.html 时，由于浏览器的默认设置，此文本看起来不会有任何不同。稍后您将设置此样式以区分标题和 <strong> 文本。

索引.html

...
<article>
  <header>
    <h2>Coral Reef <strong>Biodiversity</strong></h2>
  </header>
  ...
</article>
...

接下来，添加第一部分内容。这将是两个段落，包含在 <p> 标签中，提供有关珊瑚礁的一些详细信息。在第一段中，在一些短语周围添加一个 <em> 标签和一个 <strong> 标签以强调该内容：

索引.html

...
<article>
  <header>
    ...
  </header>
  <section>
    <p>Coral reefs are teeming with life. They are known as the <em>rainforests of the sea</em> with how many various speieces live within their waters. The defining feature of these ecosystems are the plant-like coral, which are really colonies of tiny invertabrates called <strong>polyps</strong>.</p>
    <p>Sadly, many reefs around the world are in danger due to rising ocean temperatures, pollution, and overfishing.</p>
  </section>
  ...
</article>
...

在第二部分中，为文章的这一部分添加一个 <h3> 标签作为标题。与之前的 <h2> 一样，它被设置为 <h3>，因为它是内容的子集。在 <h3> 中，在标题中的短语周围添加一个 <strong> 标记，就像在 <h2> 中一样。然后使用 <ul> 标签定义列表并使用 <li> 定义列表中的每个项目，写出一个无序列表。在其中一个列表项中，将内容包装在 <strong> 标记中：

索引.html

...
<article>
  <header>
    ...
  </header>
  <section>
    ...
  </section>
  <section>
    <h3><strong>Animal Life</strong> in a Coral Reef</h3>
    <ul>
      <li>Angelfish</li>
      <li>Clownfish</li>
      <li>Octopus</li>
      <li><strong>Sharks</strong></li>
      <li>Barracuda</li>
    </ul>
  </section>
  ...
</article>
...

对于最后一个部分，使用 <h3> 部分标题和标题中的单词周围的 <strong> 元素设置类似于第二部分的内容。代替无序列表，使用 <ol> 标签创建有序列表来定义列表，但仍然使用 <li> 标签定义每个项目。再次，在其中一个列表项中，在内容周围添加一个 <strong> 元素：

索引.html

...
<article>
  <header>
    ...
  </header>
  <section>
    ...
  </section>
  <section>
    ...
  </section>
  <section>
    <h3>Sammy's <strong>Favorite</strong> Reef Food</h3>
    <ol>
      <li>Sea Grass</li>
      <li><strong>Kelp</strong></li>
      <li>Sea Grapes</li>
      <li>Sea Lettuce</li>
    </ol>
  </section>
</article>
...

保存您的文件。

这涵盖了本教程的 HTML，并提供了您可以开始为其编写样式的元素。既然您已经完成了 index.html，请将其在编辑器中打开以供需要时参考。然后在浏览器中打开index.html可以看到浏览器的默认样式，会出现类似下图的样式：

接下来，您将向您创建的 HTML 页面应用样式。

使用类型选择器选择元素

在本节中，您将使用 类型选择器，通常称为元素选择器。类型选择器通过标签名称在页面上查找元素，使其在特异性方面最广泛。您将编写几个选择器来了解此选择器在整个 index.html 页面中的广度。

首先，看一下浏览器中的index.html。这是使用浏览器默认设置的页面外观。这些是浏览器提供的预定义样式，用于为页面内容提供视觉信息。这是样式的有用起点；在前面的示例中，您将只修改几个属性来自定义页面的外观。

接下来，在编辑器中打开 styles.css 文件。默认浏览器字体通常是 serif 字体，这是一个排版术语，指的是字符上的装饰性末端，例如 Times New Roman 中的字体。要更改整个页面的字体，您可以在一处进行更改。

为 HTML <body> 元素创建一个类型选择器，方法是在标签中输入单词 body，然后输入一个左大括号和右大括号。在花括号内，添加一个新行，然后添加值为 sans-serif 的 CSS 属性 font-family。添加 font-family 会将整个文档的字体更改为 无衬线字体 。与衬线字体不同，无衬线字体在字符上缺少装饰性末端，例如在 Helvetica 或 Arial 中：

样式.css

body {
  font-family: sans-serif;
}

完成这些更改后，保存 styles.css 并刷新浏览器以验证文本已全部更改为浏览器的默认 sans-serif 字体。整个页面中字体发生变化的原因是由于 CSS 的一个称为 inheritance 的特性。继承是指子元素从父元素继承属性值，除非另有说明。此功能不会影响所有 CSS 属性或元素，但在影响文本的属性中最为显着。

接下来，调整页面上<h2>和<h3>元素的font-weight。默认情况下，浏览器应用样式使这些元素成为粗体。创建一个 h2 和一个 h3 类型选择器，并在每个选择器中添加值为 normal 的 font-weight 属性。这会将默认值从粗体更改为正常重量：

样式.css

body {
  font-family: sans-serif;
}

h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}

保存并返回浏览器并刷新 index.html 页面。 <h2> 和 <h3> 元素的内容已从粗体更改为正常字体粗细，但 <strong> 元素中的文本除外。这是在浏览器默认设置中为 font-weight 设置显式值的情况，因此 <strong> 元素不会继承对其父元素的更改。

任何设计的主要目的都是帮助沟通。在这种情况下，设计正在努力通过字体粗细的对比来强调内容的特定部分。接下来，您将应用颜色来帮助鼓励这种对比。从 em 类型选择器开始，然后应用 yellow 的 background-color 来赋予它高光效果。接下来，为了帮助进一步关注 <strong> 内容，创建一个 strong 类型选择器，并将 color 属性设置为 red：

样式.css

...
h3 {
  font-weight: normal;
}

em {
  background-color: yellow;
}

strong {
  color: red;
}

保存 styles.css 并在浏览器中刷新 index.html 以找到您对网站设计所做的更改。如下图所示，页面上的整个文字都变成了无衬线字体，<h2>和<h3>的内容标题不再加粗，所有的<strong> 元素内容现在为红色，<em> 元素内容具有黄色荧光笔背景：

在此步骤中，您使用多个类型选择器为每个选择器创建特定样式。类型选择器告诉浏览器通过元素的名称来查找元素，并且是最广泛的特异性选择器。接下来，您将了解如何通过使用 选择器组 来简化 CSS。

使用组合器选择器选择元素

在本节中，您将使用 组合器选择器 来进行更具体的元素选择。这个选择器使用 HTML 元素的嵌套关系来选择合适的元素。您将使用此选择器使相同的元素类型在包含在其他元素类型中时看起来不同。

在浏览器中打开 index.html。当您查看样式时，由于 strong 选择器将 color: red; 应用于页面上 <strong> 的所有实例，因此经常会出现红色弹出。在此步骤中，您将根据祖先、一系列父子元素关系，在满足特定条件时更改 <strong> 元素上的 color 值.

组合选择器由选择器之间的空格字符定义，HTML 祖先从左到右读取。最右边的选择器是预期目标。这可以像 scope 所需的复杂或简单，或为预期元素提供足够的特异性。要了解组合选择器的工作原理，请打开 styles.css 并在文件底部添加一个 p 类型选择器，后跟一个空格，然后是一个 strong 类型选择器，后跟一个 open并关闭大括号：

样式.css

...
p strong {
}

这是一个组合选择器，其目标是 <strong> 元素，这些元素是 <p> 元素的祖先后代。这意味着 <p> 元素不必是 <strong> 元素的直接父元素才能使此组合选择器为真。现在通过在组合选择器中放置 color 属性来更改满足此条件的 <strong> 元素的颜色：

样式.css

...
p strong {
  color: coral;
}

保存更改并返回浏览器刷新 index.html。

接下来，为整个文件中的 <strong> 元素添加更多种类的颜色。从作为 <h3> 后代的 <strong> 元素开始，然后将这些 blue 转换为：

样式.css

...
p strong {
  color: coral;
}

h3 strong {
  color: blue;
}

最后，为了添加更多颜色，将无序列表中 <strong> 元素的颜色更改为 dodgerblue，这是一种浓郁的浅蓝色，将 <strong> 元素的颜色更改为green 的有序列表。这是了解组合选择器的祖先要求的地方。您可能认为您需要写出 ul li strong 和 ol li strong 才能正确定位这些元素。但这可以简化为 ul strong 和 ol strong 因为 ul 和 ol 足够具体：

样式.css

...
h3 strong {
  color: blue;
}

ul strong {
  color: dodgerblue;
}

ol strong {
  color: green;
}

返回浏览器并点击刷新。无序列表中的 <strong> 元素现在是深蓝色，有序列表中的 <strong> 元素现在是绿色，如下图所示：

在本节中，您了解了组合子选择器。您多次使用带有两个类型选择器的选择器为 <strong> 元素的各种实例创建自定义颜色。下一节将介绍如何通过使用 选择器组 将相似样式应用于多种元素类型来简化 CSS。

使用选择器组选择多个元素

在本节中，您将使用 选择器组 选择 HTML 元素。有一个编程原则叫做Don't Repeat Yourself，或者DRY。 DRY 代码的目的是编写更易于维护的代码。使用选择器组是在编写 CSS 时将 DRY 原则付诸实践的最快方法之一。

在编辑器中打开 styles.css。在本教程的前面，您编写了两种样式来将浏览器默认权重从 bold 更改为 normal：

样式.css

...
h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}
...

由于 h2 和 h3 类型选择器在选择器块中具有相同的属性和值，因此可以将其与选择器组合并。选择器组是通过在选择器之间放置逗号来完成的。在这种情况下，您可以删除 h3 选择器块，然后在 h2 类型选择器之后添加一个逗号，然后是 h3 类型选择器。将每个选择器放在新行上有助于列表的易读性。

样式.css

...
h2,
h3 {
  font-weight: normal;
}
...

打开浏览器并重新加载 index.html 以验证没有任何更改。由于选择器块，h2 和 h3 现在共享相同的样式。但是，您不仅限于保持样式看起来相同。您仍然可以使用单独的 h2 和 h3 类型选择器来为每个元素提供特定的样式。创建每个类型选择器，然后为每个选择器块添加不同的颜色：

样式.css

...
h2,
h3 {
  font-weight: normal;
}

h2 {
  color: maroon;
}

h3 {
  color: navy
}
...

在浏览器中刷新 index.html 发现 h2 和 h3 仍然具有 normal font-weight 相同的共享样式，但是有它们各自的 color 属性。

选择器组不限于特定类型的选择器，可以将各种选择器组合在一起以具有相同的样式。可以以多种方式使用此分组功能。要引入已经讨论过的选择器，请将组合选择器之一添加到 h2, h3 选择器组。

样式.css

...
h2,
h3,
ol strong {
  font-weight: normal;
}
...

在浏览器中刷新 index.html 后，有序列表中的 <strong> 元素将不再是粗体，而是有一个 normal font-weight，如下图：

注意通过选择器组，您可以将不同的样式组合到一个选择器块中。但是在 DRY CSS 和人类可读的 CSS 之间需要取得平衡，最好的做法是在人类可读的方面犯错。举个极端的例子，可以编写几个大型组选择器，这样就不会重复单个属性，但这对开发人员来说更难理解。在这种情况下，优先考虑开发人员的可读性。

在本节中，您使用了组选择器并将重复的 CSS 属性转换为单个选择器块。您还添加了一个带有选择器组的组合器选择器，以编写具有高特异性的可重用属性。

结论

在本教程中，您了解了编写 CSS 所需的基线选择器。现在，您可以使用嵌套在 HTML 中的 CSS 有效地在页面上找到一个元素，并为其赋予特定的样式。您还学习了 DRY 编程原则，这有助于编写简洁易管理的 CSS。这些选择器可以与许多其他 CSS 选择器配对，以获得您希望设置样式的确切元素和情况。

如果您想阅读更多 CSS 教程，请查看我们的 CSS 主题页面。