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

作者选择了技术多样性基金来接受捐赠，作为Write for DOnations计划的一部分。

介绍

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

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

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

先决条件

  • 熟悉应用于 CSS的级联和特异性概念。

  • 保存在本地计算机上的空 HTML 文件index.html，您可以从文本编辑器和选择的 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您不熟悉 HTML，请尝试整个如何在 HTML系列中构建网站。

  • 一个名为的空 CSS 文件styles.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文件中，因此请确保也准备好该文件。

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

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

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

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

索引.html
...
<header>
  <h1>About Coral Reefs</h1>
</header>
...

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

索引.html
...
<article>
  <header></header>
  <section></section>
  <section></section>
  <section></section>
</article>
...

现在，<header>在<article>. 使用<h2>here 是因为它在逻辑上可用作<body>‘s下方的二级标题<header>，带有顶级标题。在<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 中的那些。要更改整个页面的字体，您可以在一个地方进行更改。

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

样式文件
body {
  font-family: sans-serif;
}

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

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

样式文件
body {
  font-family: sans-serif;
}

h2 {
  font-weight: normal;
}

h3 {
  font-weight: normal;
}

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

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

样式文件
...
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>页面上所有实例的选择器，经常会出现红色的弹出窗口。在此步骤中，您将color根据<strong>元素的祖先、一系列父子元素关系，在元素满足特定条件时更改元素的值。

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

样式文件
...
p strong {
}

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

样式文件
...
p strong {
  color: coral;
}

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

网站内容为黑色无衬线字体，红色粗体内容，黄色背景斜体内容，段落中粗体内容除外，为浅橙色。

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

样式文件
...
p strong {
  color: coral;
}

h3 strong {
  color: blue;
}

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

样式文件
...
h3 strong {
  color: blue;
}

ul strong {
  color: dodgerblue;
}

ol strong {
  color: green;
}

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

网站内容为黑色无衬线字体，二级标题粗体为红色，段落内容粗体为浅橙色，三级标题为蓝色，无序列表中的粗体为浅蓝色，粗体为在有序列表中绿色。

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

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

在本节中，您将使用选择器组选择 HTML 元素。有一个称为不要重复自己或 DRY的编程原则。DRY 代码的目的是编写更易于维护的代码。使用选择器组是在编写 CSS 时将 DRY 原则付诸实践的最快方法之一。

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

样式文件
...
h2 {
  font-weight: normal;
}

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

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

样式文件
...
h2,
h3 {
  font-weight: normal;
}
...

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

样式文件
...
h2,
h3 {
  font-weight: normal;
}

h2 {
  color: maroon;
}

h3 {
  color: navy
}
...

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

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

样式文件
...
h2,
h3,
ol strong {
  font-weight: normal;
}
...

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

有序列表中的 \<strong\> 文本仍然是绿色的，但现在不再像基本的 \<h2\> 和 \<h3\> 元素那样加粗。

注意使用选择器组，您可以将不同的样式组合到一个选择器块中。但是在 DRY CSS 和人类可读的 CSS 之间需要取得平衡，最好的做法是站在人类可读的一边。作为一个极端的例子，可以编写几个大的组选择器，这样就不会重复单个属性，但这对开发人员来说更难理解。在这种情况下，开发人员的可读性是首选。

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

结论

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

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

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁