如何使用关系选择带有CSS的HTML元素

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

介绍

Selectors 是 Web 浏览器用来通过 CSS 查找和应用特定样式的元素。您可以使用选择许多相同类型元素的类型选择器广泛应用这些样式。除了针对 id 或 class 等元素的特定属性外，还可以根据元素的关系或与另一个元素的接近度来选择元素。例如，您可以选择跟在前一个元素或系列中的第一个元素之后的 HTML 元素。

在本教程中，您将使用几种基于 CSS 关系的方法来选择 HTML 页面上的元素并为其设置样式。您将为每个关系选择器创建一个具有不同样式场景的内容页面。您将使用后代组合器、子组合器、一般兄弟组合器和相邻兄弟组合器，以及 first-、last-、only- 和 [X175X ] 伪类选择器。这些选择器根据周围元素的相对条件应用样式，而不是传统选择器的直接方法。

先决条件

了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
类型选择器、组合选择器和选择器组的知识，您可以在如何选择 HTML 元素以使用 CSS 设置样式中找到这些知识。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何使用 HTML 构建网站系列。

设置初始 HTML 和 CSS

首先，您将设置 HTML 和 CSS 代码，您将在本教程的其余部分使用这些代码。

首先在文本编辑器中打开 index.html。然后，将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

接下来，转到 <head> 标记并添加 <meta> 标记以定义 HTML 文件的字符集。然后设置页面的标题，添加一个 <meta> 标签来定义移动设备应该如何呈现页面，最后加载您稍后将使用 <link> 标签制作的 CSS 文件。这些添加在以下代码块中突出显示。随着代码的添加和更改，您将在整个教程中遇到这种突出显示方法：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Relationship Selectors</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

添加 <head> 内容后，移动到 <body> 元素，您将在其中为讨论 CSS 选择器的页面添加内容。将此代码块中突出显示的部分添加到文本编辑器中的 index.html 文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Relationship Selectors</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Relationship Selectors</h1>
    <main class="content-width">
    </main>
  </body>
</html>

请务必将这些添加内容保存到 index.html。 <h1> 元素显示页面的标题。具有 content-width 的 class 属性的 <main> 元素将包含页面的内容，您将在整个教程中添加这些内容。

接下来，在与 index.html 文件相同的目录中创建一个名为 styles.css 的新文件，然后在文本编辑器中打开新文件。该文件将加载浏览器将应用到 index.html 内容的样式。将以下 CSS 代码添加到您的 styles.css 文件中：

样式.css

body {
  font-family: system-ui, sans-serif;
  color: #333;
}

.content-width {
  width: 90%;
  margin: 2rem auto;
  max-width: 70ch; 
}

section{
  margin: 4rem 0;
}

h1 {
  text-align: center;
}

h2 {
  color: mediumblue;
}

在此代码中，body 类型选择器为页面上的 font-family 和 color 值定义了新的默认值。 .content-width 类选择器设置为页面宽度的 90% of，最大宽度为当前 font-size 的 70 个字符宽度。 70 个字符是文本行的理想最大长度。 .content-width 属性上的 margin 保持元素上方和下方的空间，并保持容器水平居中。此页面上将有多个 <section> 元素，因此 section 类型选择器应用 margin 以在每个分组之间留出足够的空间。最后，h1 和 h2 类型选择器将 <h1> 内容设置为居中，将 <h2> 内容设置为具有 mediumblue 的颜色.

在本节中，您将设置 HTML 和 CSS 文件的起点。在下一节中，您将向 index.html 添加更多内容，然后使用后代组合器通过 CSS 应用样式。

后代组合器

在使用基于关系的选择器时，您会遇到家族术语，例如 parent、child、ancestor，在这种情况下，descendant 。后代组合器是一个以空格分隔的选择器列表，它与 HTML 结构匹配，以便将样式应用于具有特定祖先的元素。列表中的最后一个选择器是接收样式的选择器，并且是列表中先前选择器的后代。

后代组合器是 scope 样式的最快方法。作用域是提供额外细节以增加选择器特异性的方法。后代组合器通过在选择器前面加上祖先选择器来帮助确定范围。例如，a 类型选择器将获取页面上的所有 <a> 标签，但 header a 后代选择器将仅选择页面内的 <a> 标签<header> 元素。

要开始使用后代组合器，请在文本编辑器中打开 index.html。创建一个 <section> 元素，其 class 属性为 descendant。在 <section> 元素内，添加一个包含 Descendant Combinator Selector 的 <h2> 元素，然后添加两个 <p> 元素并用 Cupcake Ipsum 的内容填充它们]。将第二个 <p> 元素包裹在 <blockquote> 中。以下代码块中突出显示的 HTML 演示了如何设置：

索引.html

...
<main class="content-width">
  <section class="descendant">
    <h2>Descendant Combinator Selector</h2>
    <p>Sweet roll pudding ice cream jelly beans caramels cookie caramels. Macaroon cheesecake cookie marzipan icing jujubes. Chocolate bar jelly-o wafer toffee cookie muffin soufflé lemon drops bonbon. Soufflé danish gingerbread sweet roll marzipan carrot cake.</p>

    <blockquote>
      <p>Bear claw pastry tootsie roll biscuit jujubes oat cake toffee wafer lemon drops. Croissant pie lemon drops cake chupa chups chocolate bar chupa chups marshmallow. Cake pudding icing tiramisu tiramisu pastry topping. Gingerbread shortbread lollipop chocolate bar icing.</p>
    </blockquote>
  </section>
</main>
...

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。添加一个 .descendant 类选择器，后跟一个空格，然后是一个 blockquote 类型选择器。这将创建一个仅将样式应用于 blockquote 元素的选择器，该元素位于具有包含 descendant 的 class 属性的元素内。以下代码块中突出显示的 CSS 演示了带有 blockquote 元素样式的选择器：

样式.css

...
h2 {
  color: mediumblue;
}

.descendant blockquote {
  margin: 2rem 0;
  padding: 1rem 1rem 1rem 2rem;
  border-left: 0.125rem indigo solid;
  background-color: lavender;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。此 blockquote 元素上使用的属性通过 margin 属性在上方和下方提供额外的间距。然后，padding 属性给出容器内的内容空间。最后，容器由 border-left 属性的组合在视觉上定义，创建实心 indigo 线和应用 background-color 属性的 lavender 背景。以下屏幕截图显示了此代码将如何在浏览器中呈现：

您还可以将后代组合器选择器应用于后代元素，无论该元素在 HTML 中相对于祖先选择器有多深。与前面的代码将样式设置为 .descendant 类选择器内的 <blockquote> 元素的方式类似，接下来您将对所有 <p> 元素应用样式，无论它们是什么元素包含在。

在文本编辑器中返回 styles.css 文件。然后，为祖先为 .descendant 的 p 元素选择器添加新的后代组合器选择器。在选择器块内，将 line-height 属性设置为 1.5 的值。以下代码块中突出显示的 CSS 显示了它的外观：

样式.css

...
.descendant blockquote {
  margin: 2rem 0;
  padding: 1rem 1rem 1rem 2rem;
  border-left: 0.125rem indigo solid;
  background-color: lavender;
}

.descendant p {
  line-height: 1.5;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。两个 <p> 元素的文本行现在更大，尽管其中一个 <p> 元素位于 <blockquote> 元素内。下图说明了这将如何在浏览器中呈现：

最后，在文本编辑器中返回 styles.css 文件。您将创建一个新的后代选择器以将样式直接应用于 <blockquote> 元素内的 <p> 元素。首先写出 .descendant blockquote p，这将告诉浏览器在页面上找到 <p> 元素，该元素位于 <blockquote> 元素内的某个位置，而该元素又位于具有descendant 的 class 属性。然后在选择器块中，添加设置为 1.25rem 的 font-size 属性和以 #222 作为值的 color 属性。以下代码块中突出显示的 CSS 演示了必要的结构：

样式.css

...
.descendant p {
  line-height: 1.5;
}

.descendant blockquote p {
  font-size: 1.25rem;
  color: #222;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。 <blockquote> 中的 <p> 元素的 font-size 内容现在会更大，并且具有稍微柔和的灰色，如下图所示：

在本节中，您使用了后代组合器选择器将样式范围限定为在另一个元素内部找到的元素以应用样式。在下一节中，您将使用子组合器选择器仅选择元素的第一级子级。

子组合选择器

在确定样式范围时，有时您不希望祖先选择器中的所有元素，只希望元素内的所有元素。例如，您可能希望设置导航栏中所有顶级链接的样式，而不是任何子导航元素中包含的任何链接。对于只需要设置给定父级的子级样式的这些时刻，您可以使用子级组合器选择器。

在使用这个新的选择器之前，请在文本编辑器中返回 index.html 并在 <main> 元素内和之前的 <section> 元素之后添加以下代码块中突出显示的 HTML：

索引.html

...
<main class="content-width">
  ...
  <section class="child">
    <h2>Child Combinator Selector</h2>

    <p>Sweet roll carrot cake cake chocolate bar sugar plum. Cheesecake caramels jelly-o sugar plum icing muffin marzipan chocolate bar jujubes. Dessert cotton candy gummies chocolate cake sweet.</p>

    <div>
      <p>Liquorice sesame snaps chocolate bar soufflé oat cake candy canes fruitcake lollipop candy. Macaroon wafer cotton candy tootsie roll jelly halvah. Icing powder soufflé toffee dessert gummies bear claw donut cake.</p>
    </div>
  </section>
</main>
...

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。

首先，您将使用 line-height 属性扩展 .descendant p 选择器，以包含 <section> 中的 <p> 元素和 child 类. 您将通过使用通用组合器来完成，它允许多个选择器共享相同的样式。每个选择器之间需要一个逗号来应用样式。在 .descendant p 选择器之后添加一个逗号，然后添加一个 .child p 后代组合器，如以下突出显示的代码所示：

样式.css

...
.descendant p,
.child p {
  line-height: 1.5;
}
...

将更改保存到 styles.css 并在浏览器中打开 index.html。新部分中的内容现在将在每行文本之间有更大的空间。下图描述了它在浏览器中的显示方式：

接下来，要仅选择 <p> 元素，它是 <section class="child"> 元素的直接子元素，您将使用子组合子选择器。这是通过编写父选择器后跟大于号 (>) 和子选择器来构造的。

在文本编辑器中返回 styles.css 并转到文件末尾。通过将父选择器设置为 .child 并将子选择器设置为 p 来创建子组合器选择器。然后在选择器块中将 color 属性设置为 forestgreen 的命名值。以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css

...
.descendant blockquote p {
  font-size: 1.25rem;
  color: #222;
}

.child > p {
  color: forestgreen;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。只有第一个 <p> 元素的文本设置为 forestgreen 颜色。包裹第二个 <p> 元素的 <div> 元素将与 <section> 元素的关系从子元素更改为孙子元素。因此，该 <p> 元素对于子组合选择器无效。下图说明了它是如何在浏览器中呈现的：

在本节中，您使用了子组合器选择器来选择样式并将其应用于父元素的直接子元素。在下一节中，您将使用同级元素的关系来将样式应用于具有共同父元素的元素。

兄弟组合选择器

通用兄弟组合器提供了一种将样式范围限定在特定元素之后且具有相同父元素但可能彼此不相邻的元素的方法。这通常会在 HTML 众所周知但不可预测时发生，例如动态生成的内容。

首先，您需要 HTML 兄弟姐妹才能使用选择器。在文本编辑器中返回 index.html。然后，在结束 </main> 标记之前添加以下代码块中突出显示的 HTML：

索引.html

...
<main class="content-width">
  ...
  <section class="general-sibling">
    <h2>General Sibling Combinator Selector</h2>

    <p>Donut dessert jelly-o pie gingerbread jelly-o gummies biscuit gummies. Fruitcake jelly bonbon croissant carrot cake gummies. Candy canes apple pie liquorice gummi bears shortbread lemon drops jelly-o marzipan halvah. Jujubes chocolate bar tart bear claw sweet.</p>

    <div>
      <p>Carrot cake soufflé oat cake gummies marzipan sugar plum pastry jujubes. Tootsie roll pastry danish cake cake cake jelly sesame snaps. Donut pastry brownie brownie pie croissant</p>
    </div>

    <p>Gummies apple pie gingerbread cheesecake chupa chups cookie jelly beans. Tootsie roll dessert liquorice jujubes apple pie biscuit gummies biscuit jelly-o. Cake candy canes danish sugar plum biscuit lemon drops icing.</p>

    <p>Jelly beans candy candy cookie cotton candy. Liquorice gummies biscuit dragée sesame snaps oat cake tiramisu. Powder sweet dessert chupa chups ice cream sweet.</p>
  </section>
</main>
...

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。

接下来，您将使用 line-height 属性扩展分组选择器，以包含 <section> 中的 <p> 元素和 general-sibling 类。同样，这是通过在 .child p 选择器后添加逗号并添加 .general-sibling p 后代组合符来完成的，如以下突出显示的 CSS 所示：

样式.css

...
.descendant p,
.child p,
.general-sibling p {
  line-height: 1.5;
}
...

将更改保存到 styles.css 并在浏览器中刷新 index.html。新部分中的内容现在将在每行文本之间有更大的空间。下图描述了它在浏览器中的显示方式：

接下来，您将为位于同一父级的另一个 <p> 元素之后的兄弟 <p> 元素编写样式。这是通过编写一个选择器，后跟一个波浪号（~），然后是您希望设置样式的兄弟的选择器来完成的。

在文本编辑器中返回 styles.css 并为 .general-sibling p 添加一个新选择器。这将找到具有 class 属性和 general-sibling 的父元素的 <p> 元素。然后添加波浪符号，后跟 p 元素选择器。在选择器块内，将 color 属性设置为 lightseagreen 的命名值，如以下代码块的突出显示的 CSS 所示：

样式.css

...
.child > p {
  color: forestgreen;
}

.general-sibling p ~ p {
  color: lightseagreen;
}

保存对 styles.css 的更改并返回浏览器刷新 index.html。下图展示了此代码将如何在浏览器中呈现：

只有四个段落中的最后两个将具有 lightseagreen 颜色。这是因为第一段是初始化选择器，组合器的 .general-sibling p 部分，这意味着后续的 <p> 元素将接收样式。第二段文本在 <p> 元素内，但由于它嵌套在 <div> 元素内，它不再是初始化选择器的兄弟。

兄弟选择器不必是相同的元素类型。为了证明这一点，请返回文本编辑器中的 styles.css 文件，并将选择器中的第一个 p 更改为 div，如下面的代码块中突出显示的：

样式.css

...
.general-sibling div ~ p {
  color: lightseagreen;
}

将小改动保存到 styles.css 并在浏览器中刷新 index.html。视觉上没有任何变化，但是浏览器应用样式的方式确实发生了变化。接收样式的元素必须是 <p> 元素，它们是波浪号之前选择器之后的兄弟元素。由于 HTML 的顺序是 <p />、<div />、<p />、然后是 <p />，所以两个通用兄弟选择器的结果是一样的。第一个 <p> 元素不接收样式，因为尽管它是同级元素，但它位于初始化 .general-sibling div 选择器之前。

在本节中，您使用了通用兄弟组合器将样式应用于某种类型的任何兄弟元素。在下一节中，您将使用相邻兄弟组合器在元素之后立即将样式应用于兄弟。

相邻兄弟组合器选择器

如果您只需要在 HTML 中两个特定元素彼此相邻时应用样式，则相邻兄弟组合器将帮助选择适当的元素。当在标题文本和正文文本之间应用额外的空间或在元素之间添加分隔线时，这可能很有用。

要开始使用相邻的同级组合器，首先在文本编辑器中打开 index.html。然后，在 <main> 元素内，添加以下代码块中突出显示的 HTML：

索引.html

...
<main class="content-width">
  ...
  <section class="adjacent-sibling">
    <h2>Adjacent Sibling Combinator Selector</h2>

    <p>Donut dessert jelly-o pie gingerbread jelly-o gummies biscuit gummies. Fruitcake jelly bonbon croissant carrot cake gummies. Candy canes apple pie liquorice gummi bears shortbread lemon drops jelly-o marzipan halvah. Jujubes chocolate bar tart bear claw sweet.</p>

    <div>
      <p>Carrot cake soufflé oat cake gummies marzipan sugar plum pastry jujubes. Tootsie roll pastry danish cake cake cake jelly sesame snaps. Donut pastry brownie brownie pie croissant</p>
    </div>

    <p>Gummies apple pie gingerbread cheesecake chupa chups cookie jelly beans. Tootsie roll dessert liquorice jujubes apple pie biscuit gummies biscuit jelly-o. Cake candy canes danish sugar plum biscuit lemon drops icing.</p>

    <p>Jelly beans candy candy cookie cotton candy. Liquorice gummies biscuit dragée sesame snaps oat cake tiramisu. Powder sweet dessert chupa chups ice cream sweet.</p>
  </section>
</main>

将更改保存到 index.html，然后在文本编辑器中打开 styles.css。使用 .adjacent-sibling p 扩展 line-height 的选择器组，如以下代码块中突出显示的那样：

样式.css

...
.descendant p,
.child p,
.general-sibling p,
.adjacent-sibling p {
  line-height: 1.5;
}
...

接下来，转到 styles.css 文件的最后一行。在这里，您将编写一个相邻的兄弟组合器选择器，以将顶部边框和额外的填充应用于前面有另一个 <p> 元素的 <p> 元素。以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css

...
.general-sibling div ~ p {
  color: lightseagreen;
}

.adjacent-sibling p + p {
  border-top: 1px solid black;
  padding-top: 1em;
}

由于此样式应仅应用于 <section class="adjacent-sibling"> 元素内的 <p> 元素，因此第一个选择器必须使用后代组合器。选择器中的第二个元素只需要使用一个元素选择器，因为它是兄弟元素的相邻元素。

注意： 使用同级选择器时务必记住，序列中的最后一个选择器是被选中的元素。假设一个相邻的兄弟组合器被写为 .adjacent-sibling p + .adjacent-sibling p。此代码的意图可能是在 .adjacent-sibling 的祖先中的 <p> 之后选择 <p>。但是，这个相邻的兄弟选择器将尝试定位 .adjacent-sibling 的祖先中的 <p>，该祖先紧跟在 <p> 兄弟之后，而后者又是另一个元素的后代具有 adjacent-sibling 的 class。

将更改保存到 styles.css 并在浏览器中刷新 index.html。边框将呈现在最后一段上方，因为这是 <p> 与 <p> 相邻的位置。顶部的额外填充在视觉上补偿了边距，因此线条上方和下方的间距相等，如下图所示：

此选择器不限于同类兄弟姐妹；它可以是任何类型的兄弟选择器。返回到 styles.css 并创建一个新的相邻兄弟选择器，以在 <div> 元素和相邻的 <p> 元素之间添加红色边框，以及一些额外的顶部填充。以下代码块中突出显示的 CSS 演示了如何设置：

样式.css

...
.adjacent-sibling p + p {
  border-top: 1px solid black;
  padding-top: 1em;
}

.adjacent-sibling div + p {
  border-top: 1px solid red;
  padding-top: 1em;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。现在第二段和第三段之间有一条红线，因为这是 <div> 元素在 <p> 元素旁边的位置。下图显示了这将如何在浏览器中呈现：

在本节中，您使用了相邻兄弟组合器将样式应用于紧跟在兄弟元素之后的元素。在下一节中，您将使用第一个子伪类将样式应用于父元素的第一个元素。

`first-child` 伪类选择器

在处理特定子元素时，CSS 提供了 伪类选择器 来优化选择过程。伪类选择器是与选择器的条件相关的状态。在本节中，您将定位指定或未指定父元素的第一个子元素，即第一个嵌套元素。

首先，在文本编辑器中打开 index.html。然后，在 <main> 元素内，添加以下代码块中突出显示的 HTML：

索引.html

...
<main class="content-width">
  ...
  <section>
    <h2>First and Last Child Pseudo-Class Selector</h2>
    <ul>
      <li>Sugar plum gingerbread</li>
      <li>Sesame snaps sweet ice cream</li>
      <li>Jelly beans macaroon dessert</li>
      <li>Chocolate cheesecake</li>
      <li>Sweet roll pastry carrot cake</li>
      <li>Sugar plum tart cake</li>
      <li>Pudding soufflé</li>
      <li>Marshmallow oat cake</li>
    </ul>
  </section>
</main>

此 HTML 创建一个由 <ul> 元素定义的无序列表，其中嵌套了八个列表项 (<li>)。默认情况下，这将在浏览器中创建一个项目符号列表。

将这些更改保存到 index.html，然后在文本编辑器中打开 styles.css。

在您的 CSS 文件中，添加一个 ul 元素选择器。本节不需要任何与类相关的范围。然后在选择器块中添加值为 none 的属性 list-style，这将删除项目符号列表样式。将 margin 属性设置为 1rem 0 并将 padding 属性设置为 0，这将覆盖浏览器默认样式。以下代码块中突出显示的 CSS 演示了如何设置它：

样式.css

...
.adjacent-sibling div + p {
  border-top: 1px solid red;
  padding-top: 1em;
}

ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。无序列表将不再有项目符号，并将与标题文本对齐，如下图所示：

接下来，要为列表项提供一些默认样式，请创建一个 li 元素选择器。在选择器块中应用 padding 属性，其值为 0.5rem 0.75rem。然后，添加一个浅绿色的 background-color 属性，其值为 hsl(120, 50%, 95%)。最后，使用 hsl(120, 50%, 80%) 添加设置为 1px 和 solid 的 border 属性，并使用略深的绿色，如以下代码块中突出显示的那样：

样式.css

...
ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

ul li {
  padding: 0.5rem 0.75rem;
  background-color: hsl(120, 50%, 95%);
  border: 1px solid hsl(120, 50%, 80%);
}

将这些更改保存到 styles.css 并在浏览器中打开 index.html。每个列表项现在都具有浅绿色背景色和深绿色边框，文本由 padding 属性插入。下图显示了它将如何在浏览器中呈现：

列表项的上下边框加倍了项之间边框的粗细，使得边框粗细不一致。要解决这种情况，请在文本编辑器中返回 styles.css。然后，添加一个新的相邻兄弟组合器以选择 <li> 元素，该元素位于 <ul> 元素内的 <li> 元素之后，如以下代码块所示：

样式.css

...
ul li {
  padding: 0.5rem 0.75rem;
  background-color: hsl(120, 50%, 95%);
  border: 1px solid hsl(120, 50%, 80%);
}

ul li + li {
  border-top: none;
}

将添加的内容保存到 styles.css 并在浏览器中刷新 index.html。列表项之间的额外粗线已通过从另一个列表项之后的任何列表项的顶部移除边框来解决。下图展示了它在浏览器中的显示方式：

现在，返回 styles.css 以将圆角应用到第一个列表项的顶部。由于这只需要应用于无序列表的第一个列表项，因此您可以使用子组合子选择器。这将确保仅选择无序列表的第一个直接子级。在 li 元素选择器之后，立即追加 :first-child，不带空格。对于顶部的圆角样式，使用值设置为 0.75rem 0.75rem 0 0 的 border-radius 属性，这会将圆角添加到左上角和右上角。以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css

...
ul li + li {
  border-top: none;
}

ul > li:first-child {
  border-radius: 0.75rem 0.75rem 0 0;
}

将此更改保存到 styles.css 并返回浏览器以刷新 index.html。无序列表中的第一项现在在元素的顶部具有圆角。下图说明了它是如何在浏览器中呈现的：

在本节中，您为列表创建了样式并将圆角应用于 <ul> 父元素的第一个子 <li> 元素。在下一节中，您将使用 last-child 伪类选择器对列表末尾的 <li> 进行样式设置。

`last-child` 伪类选择器

与 first-child 伪类选择器捕获父元素的第一个元素相同，last-child 伪类选择器捕获父元素的最后一个元素。在上一节中，您在第一个列表项的顶部添加了圆角。在本节中，您将在最后一项的底部添加圆角。

首先，在文本编辑器中返回 styles.css。在 :first-child 的选择器块之后，在 li 元素选择器上添加一个带有 :last-child 的类似格式的子组合器。在选择器块中，添加一个 border-radius 属性，然后使用 0 0 0.75rem 0.75rem 作为值。该值会将顶部值设置为 0，将右下角和左下角曲线值设置为 0.75rem。以下代码块中突出显示的 CSS 显示了它是如何组成的：

样式.css

...
ul > li:first-child {
  border-radius: 0.75rem 0.75rem 0 0;
}

ul > li:last-child {
  border-radius: 0 0 0.75rem 0.75rem;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。整个无序列表现在看起来像一个圆角相等的盒子。下图演示了它是如何在浏览器中呈现的：

在本节中，您使用了 last-child 伪类将样式应用于无序列表中的最后一个 <li> 元素。在下一节中，您将为只有一个子元素时编写样式。

`only-child` 伪类选择器

将样式应用于可以更改或更新的内容时，可能会出现只有一个子元素的情况。在这些情况下，元素既是第一个子元素也是最后一个子元素，这可能导致伪类覆盖彼此的样式。对于这个场景，有另一个伪类选择器专门用于唯一的子场景。

首先，在您的文本编辑器中打开 index.html 并在 <main> 元素内和前一个 <section> 元素之后添加以下代码块中突出显示的 HTML：

索引.html

...
<main class="content-width">
  ...
  <section>
    <h2>Only Child Pseudo-Class Selector</h2>  
    <ul>
      <li>Sweet roll pastry carrot cake</li>
    </ul>
  </section>
</main>

保存对 index.thml 的更改，然后返回浏览器并刷新页面。浏览器在顶部应用 :first-child 圆角，但随后 :last-child 圆角属性会覆盖第一个。这导致单个列表项在顶部具有尖角，在底部具有圆角。下图显示了代码的浏览器呈现：

返回文本编辑器并打开 styles.css。为了解决这种情况，您将在子组合器的 li 部分上使用 :only-child 伪类选择器。然后，对于 border-radius 属性，将值设置为单个 0.75rem，这会将曲线应用于所有四个角。以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css

...
ul > li:last-child {
  border-radius: 0 0  0.75rem 0.75rem;
}

ul > li:only-child {
  border-radius: 0.75rem;
}

将这些添加保存到 styles.css，返回浏览器并刷新 index.html。现在，单个列表项的所有边都有圆角，如下图所示：

在本节中，您使用了 only-child 伪类选择器将样式应用于无序列表中的单个 <li> 元素。在下一节中，您将使用伪类选择器根据父元素中的数字计数将样式应用于任何特定子元素。

`nth-child` 伪类选择器

nth-child 伪类选择器允许您设置选择子元素的模式。其他选择器使用元素的特性（例如属性值）来查找匹配的 HTML 元素。 nth-child 伪类选择器通过其父元素中的给定数字位置定位 HTML 元素。术语 nth 是一个数学短语，指的是系列中的未知数。这个特定的选择器可以选择序列中的偶数和奇数子代以及特定编号的元素。

要为此选择器设置 HTML，请在文本编辑器中打开 index.html。然后，在最后一个 </section> 标记之后添加以下代码块中突出显示的部分：

索引.html

...
<main class="content-width">
  ...
  <section>
    <h2>Nth Child Pseudo-Class Selector</h2>
    <ol>
      <li>Caramel marshmallows</li>
      <li>Gummi bears</li>
      <li>pudding donut</li>
      <li>Chocolate bar</li>
      <li>Lemon drops</li>
      <li>Lollipop</li>
      <li>Danish soufflé</li>
    </ol>
  </section>
</main>

此代码设置了一个有序列表，由 <ol> 元素定义。与 <ul> 用项目符号标记每个列表项不同，<ol> 按顺序用数字标记每个项目。

请务必将这些更改保存到 index.html。然后在文本编辑器中返回 styles.css。您将为有序列表和列表项设置一些调整后的样式。创建一个 ol 元素选择器，并将 padding 属性设置为 0。接下来，添加一个值为 inside 的 list-style-position 属性；这会将生成的数字移动到 <li> 元素的盒子模型内。最后，创建一个 ol li 后代组合器，并将 padding 属性设置为 0.25rem。参考以下代码块中突出显示的 CSS 以了解如何编写：

样式.css

...
ul > li:only-child {
  border-radius: 0.75rem;
}

ol {
  padding: 0;
  list-style-position: inside;
}

ol li {
  padding: 0.25rem;
}

将您的更改保存到 styles.css，然后打开 Web 浏览器并加载您的 index.html 文件。新部分将呈现一个包含七个项目的列表，每个项目都以其序列中的数值开头，如下图所示：

要开始使用 nth-child 伪类，请在文本编辑器中返回 styles.css。选择器的设置与前面的伪类类似，但末尾带有括号。此括号包含用于选择元素的单词值或数值。要选择所有偶数列表项，请为 ol 和 li 创建一个后代组合器。然后，添加 :nth-child() 并在括号内添加单词 even。在选择器块中，将 background-color 属性设置为 aliceblue，如以下代码块中突出显示的那样：

样式.css

...
ol li {
  padding: 0.25rem;
}

ol li:nth-child(even) {
  background-color: aliceblue;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。列表中的第二个、第四个和第六个项目现在具有浅蓝色背景。这是创建一种称为斑马条纹的样式的方法，它有助于长信息列表的易读性。下图演示了它是如何在浏览器中呈现的：

接下来，在文本编辑器中返回 styles.css 并对奇数列表项执行相同的操作。使用 :nth-child() 伪类选择器创建另一个后代组合器。这次，在括号内添加单词值 odd。然后在选择器块中将 background-color 属性设置为 lavenderblush，浅粉色。以下突出显示的代码显示了如何设置它：

样式.css

...
ol li:nth-child(even) {
  background-color: aliceblue;
}

ol li:nth-child(odd) {
  background-color: lavenderblush;
}

将该更改保存到 styles.css 并在浏览器中重新加载 index.html。该列表现在在 lavenderblush 和 aliceblue 之间交替，第一个、第三个、第五个和第七个列表项使用新颜色。下图显示了这将如何显示：

最后，可以插入数值而不是单词值。返回 styles.css 并添加另一个 ol li:nth-child() 选择器，这次在括号内添加 4。这将选择列表中的第四项。要使该项目脱颖而出，请添加设置为 white 的 color 属性和设置为 indigo 的 background-color 属性，如以下代码块中突出显示的：

样式.css

...
ol li:nth-child(odd) {
  background-color: lavenderblush;
}

ol li:nth-child(4) {
  color: white;
  background-color: indigo;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。奇数项和偶数项保留了其交替的斑马条纹样式，但第四项现在具有带有白色文本的紫色背景。下图显示了它是如何在浏览器中呈现的：

注意： :nth-child() 伪类也可以使用代数方程，例如 3n 来选择列表中的每三个项目。 CSS Tricks 有一个 nth-child 测试工具来测试 nth-child 值，以帮助理解这个伪类选择器的复杂多功能性。

在最后一节中，您使用 :nth-child() 伪类选择器将样式应用于偶数元素、奇数元素，特别是列表中的第四个元素。

结论

在本教程中，您使用了许多基于关系概念的新选择器。您使用了后代组合器和子组合器选择器来选择其他元素内的元素。然后，您使用通用兄弟组合器和相邻兄弟组合器来选择具有共享父级的元素并根据邻近度应用样式。最后，您使用了一系列伪类选择器来设置第一个、最后一个和唯一的子元素以及它们之间的每个第 n 个元素的样式。这些选择器将帮助您磨练和确定项目的样式。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何使用关系选择带有CSS的HTML元素

介绍

先决条件

设置初始 HTML 和 CSS

后代组合器

子组合选择器

兄弟组合选择器

相邻兄弟组合器选择器

first-child 伪类选择器

last-child 伪类选择器

only-child 伪类选择器

nth-child 伪类选择器

结论

`first-child` 伪类选择器

`last-child` 伪类选择器

`only-child` 伪类选择器

`nth-child` 伪类选择器