CSS伪级：基于其索引的样式元素

CSS 选择器：基于元素在文档子树中位置的伪类选择

核心要点

• CSS 提供了被称为子索引伪类的选择器，用于根据元素在文档子树中的位置匹配元素。这些包括 :first-child、:last-child、:only-child、:nth-child() 和 :nth-last-child()。
• :nth-child() 和 :nth-last-child() 伪类是函数式的，可以接受 odd 关键字、even 关键字、整数或 An B 形式的参数，其中 A 是步长间隔，B 是偏移量，n 是正整数。
• :only-child 伪类如果元素是另一个元素的唯一子元素则匹配该元素。<code>:empty 伪类可以选择没有子元素的元素，甚至连空格也没有。
• CSS 提供了类型化的子索引伪类，它们根据索引值匹配元素，但仅限于特定类型的元素。这些包括 :first-of-type、:last-of-type、:only-of-type、:nth-of-type() 和 :nth-last-of-type()。

CSS 还提供选择器，用于根据元素在文档子树中的位置匹配元素。这些被称为子索引伪类，因为它们依赖于元素的位置或顺序，而不是它的类型、属性或 ID。共有五个：

• :first-child
• :last-child
• :only-child
• :nth-child()
• :nth-last-child()

:first-child 和 :last-child

正如您从名称中猜到的那样，:first-child 和 :last-child 伪类可以用来选择作为节点（元素）的第一个或最后一个子元素的元素。与其他伪类一样，当由简单选择器限定时，:first-child 和 :last-child 的副作用最少。

让我们看一下下面的 HTML 和 CSS：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

您可以看到它在下面的图中是什么样子。

因为 :first-child 没有限定，h2 元素和第一个 li 元素都是粉红色的。毕竟，h2 是 body 的第一个子元素，li 是 ul 元素的第一个子元素。但是为什么剩下的 li 元素是绿色的呢？那是因为 :last-child 也未限定，ul 是 body 的最后一个子元素。我们实际上键入了 *:first-child 和 *:last-child。

如果我们通过添加一个简单的选择器来限定 :first-child 和 :last-child，那么这一切就更有意义了。让我们将选择限制为列表项。将 :first-child 更改为 li:first-child，将 :last-child 更改为 li:last-child。下图显示了结果。

:nth-child() 和 :nth-last-child()

能够选择文档的第一个和最后一个子元素是很好的。但是，如果我们想选择奇数或偶数元素呢？也许我们想选择文档子树中的第六个元素，或者将样式应用于每三个元素。这就是 :nth-child() 和 :nth-last-child() 伪类发挥作用的地方。

与 :not() 一样，:nth-child() 和 :nth-last-child() 也是函数式伪类。它们接受一个参数，该参数应该是：

• odd 关键字
• even 关键字
• 一个整数，例如 2 或 8，或者
• An B 形式的参数，其中 A 是步长间隔，B 是偏移量，n 是表示正整数的变量。

最后一项有一定的复杂性。我们稍后再讨论它。

:nth-child() 和 :nth-last-child() 之间的区别是什么？起点：:nth-child() 向前计数，:nth-last-child() 向后计数。CSS 索引使用计数数字，从 1 开始而不是从 0 开始。

:nth-child() 和 :nth-last-child() 都可用于交替模式。创建斑马纹表格行颜色是完美的用例。下面的 CSS 为偶数编号的表格行提供了一个浅蓝灰色的背景，其结果可以在下图中看到：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

将 :nth-child 切换为 :nth-last-child 会反转此条带，因为计数从底部开始，如下所示。

如何尝试使用更复杂参数的一些复杂示例？我们将从下面显示的文档开始，该文档包含 20 个项目。

使用 :nth-child() 和 :nth-last-child()，我们可以选择特定位置的单个子元素。我们可以选择特定位置之后的所有子元素，或者我们可以通过倍数选择元素，并带有一个偏移量。让我们更改第六个项目的背景颜色：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

这给了我们下面的结果。

但是如果我们想选择每三个元素呢？这就是 An B 语法发挥作用的地方：

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

同样，A 是步长间隔。它几乎就像 n 的乘数，n 从 1 开始。因此，如果 A = 3，则 3n 将匹配第 3、6、9 等元素。这正是发生的情况，正如您在下面看到的。

事情变得更有趣的地方来了。我们可以使用 :nth-child() 和 :nth-last-child() 来选择某个点之后的所有元素。让我们尝试选择除前七个元素之外的所有元素：

<code class="language-css">.item:nth-child(6) {
  background: #e91e63;
}</code>

这里没有步长值。因此，n 8 匹配从第八个元素开始的每个元素 n，如下所示。

注意：负偏移量

负偏移量和范围值也是有效的。使用 :nth-child(-n 8) 将反转我们的选择，并匹配前八个元素。

我们还可以使用偏移量和步长值来选择每三个元素，从第五个开始：

<code class="language-css">.item:nth-child(3n) {
  background: #e91e63;
}</code>

您可以在下图中看到此选择器的结果。

:only-child

如果元素是另一个元素的唯一子元素，则 :only-child 伪类匹配该元素。下面是两个无序列表。第一个有一个项目，而第二个包含三个：

<code class="language-css">.item:nth-child(n+8) {
  background: #e91e63;
}</code>

使用 li:only-child{color: #9c27b0;} 将选择 Apple，因为它是我们第一个列表的唯一子元素。但是，第二个列表中的任何项目都不匹配，因为有三个同级元素。您可以看到它在下面的图中是什么样子。

<code>:empty

也可以使用 <code>:empty 伪类选择没有子元素的元素。当我们说 <code>:empty 时，我们的意思是空。为了使元素匹配 <code>:empty 伪类，它不能包含任何其他内容——甚至空格也不行。换句话说，<code><p></p><p> </p> 将匹配，但 <code>:empty :not() 将不匹配。有时，所见即所得 (WYSIWYG) 编辑器会将空 p 元素插入到您的内容中。您可以将 p:not(:empty) 与

伪类组合使用，以避免将样式应用于这些元素；例如

。

通过其索引选择特定类型的元素p:nth-last-child(2)

上一节中讨论的伪类如果元素占据文档子树中的给定位置，则匹配该元素。例如，

选择每个作为其父元素的倒数第二个元素的 p 元素。

在本节中，我们将讨论类型化的子索引伪类。这些伪类也根据其索引值匹配元素；但是，匹配仅限于特定类型的元素。例如，选择第五个 p 元素，或者偶数索引的 h2 元素。

有五个这样的伪类，其名称与其非类型化对应物的名称相同：
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-of-type()
• :nth-last-of-type()

p:nth-child(5) p:nth-of-type(5)这些伪类与子索引伪类之间的区别是细微的。其中

仅当它是 p 元素时才匹配第五个项目，

匹配所有 p 元素，然后在这些元素中找到第五个 p 元素。

让我们从一个稍微不同的文档开始。它仍然有 20 个项目，但其中一些是 p 元素，一些是 div 元素。p 元素具有圆角，如下所示。

:first-of-type :last-of-type使用 :only-type、

和

:first-of-type

使用

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

，我们可以选择匹配选择器的第一个元素。我们如何为第一个 p 元素提供一个青柠绿色的背景：

这将匹配每个作为其父元素的第一个 p 元素的 p 元素，如下所示。

:last-of-type 伪类的作用类似，它匹配其父元素的最后一个此类元素，如下所示。但是，如果元素是其父元素的:only-of-type唯一

此类子元素，则 将匹配该元素，如下所示。

让我们再看一个使用 :first-of-type 的示例，但这次使用伪元素。还记得本章前面提到的 ::first-letter 伪元素吗？好吧，正如您所看到的，它为应用它的每个元素创建了一个初始大写字母。我们不妨更进一步，将这个初始大写字母限制在第一个段落中：

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

如下图所示，现在我们的段落将有一个初始大写字母，即使它前面有标题。

使用 :nth-of-type 和 :nth-last-of-type

:nth-of-type() 和 :nth-last-of-type() 也是函数式伪类。它们接受与 :nth-child() 和 :nth-last-child() 相同的参数。但与 :first-of-type 和 :last-of-type 一样，索引解析为相同类型的元素。例如，要选择第一个 p 元素和每个后续的 p 元素，我们可以将 odd 关键字与 :nth-of-type() 一起使用：

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

正如您从下图中看到的，这只会匹配奇数编号的 p 元素，而不是奇数编号的子元素。

类似地，使用 :nth-last-of-type(even) 选择偶数编号的 p 元素，但计数从文档中的最后一个 p 元素开始——在本例中是项目 18（如下所示）。

如果这仍然看起来很模糊，请使用 Paul Maloney 的 Nth-Test 工具，或查看 Nth Master 上的示例。这两个项目都是学习更多关于这些伪类的极好方法。

---

^[5] 此 An B 语法在 CSS 语法模块级别 3 中进行了描述。

关于 CSS 伪类和基于索引的元素样式的常见问题解答

什么是 CSS 伪类？

CSS 伪类是添加到选择器中的关键字，用于指定所选元素的特殊状态。例如，:hover 可用于在用户的指针悬停在按钮上时更改按钮的颜色。伪类与类和 ID 一起，是一种在不更改 HTML 标记的情况下将样式应用于元素的方法。

:nth-child 伪类是如何工作的？

:nth-child 伪类根据元素在一组同级元素中的位置匹配元素。它使用类似函数的语法 :nth-child(an b)，其中“a”和“b”是整数值。“n”是从 0 开始的计数器，并且对于每个元素都会增加 1 的增量。“an b”表示要选择的元素，从第一个元素开始 (b=1)。

:nth-child 和 :nth-of-type 之间的区别是什么？

:nth-child 根据元素在其所有同级元素中的位置匹配元素，而 :nth-of-type 仅考虑相同类型同级元素中的位置。例如，p:nth-child(2) 如果它是 <code><p></p> 元素，则会选择第二个子元素，而 p:nth-of-type(2) 将选择第二个 <code><p></p> 元素，而不管它在其他同级元素中的位置如何。

如何使用给定的类名选择第一、第二或第三个元素？

您可以将 :nth-child 伪类与类选择器组合使用。例如，.myClass:nth-child(1) 将选择具有类“myClass”的第一个元素。请记住，只有当元素是其父元素的第一个子元素时，这才能工作。

我可以在 :nth-child 中使用负值吗？

不可以，:nth-child 不允许使用负值。您可以使用的最小值是 0，它不选择任何元素。

如何选择每个偶数或奇数元素？

您可以将“even”和“odd”关键字与 :nth-child 一起使用，以选择每个偶数或奇数元素。例如，:nth-child(even) 将选择从第一个元素开始的每个第二个元素。

我可以将 :nth-child 与其他伪类一起使用吗？

是的，您可以将 :nth-child 与其他伪类组合使用。例如，:nth-child(2):hover 将在用户的指针悬停在第二个子元素上时应用样式。

:nth-child 和 :nth-of-type 之间是否存在性能差异？

在大多数情况下，性能差异可以忽略不计。但是，在处理大量元素时，:nth-of-type 可能稍快一些，因为它只考虑相同类型的同级元素。

我可以将 :nth-child 与伪元素一起使用吗？

不可以，伪元素不能与 :nth-child 一起使用，因为它们不被认为是文档树的一部分。

:nth-child 是否存在浏览器兼容性问题？

所有现代浏览器都很好地支持 :nth-child。但是，Internet Explorer 8 或更早版本不支持它。对于这些浏览器，您可能需要使用 JavaScript 或 jQuery 来实现类似的效果。

所有图片均保持原格式和位置。

以上是CSS伪级：基于其索引的样式元素的详细内容。更多信息请关注PHP中文网其他相关文章！