揭秘 CSS 伪类（:nth-child vs. :nth-of-type）

使用 css 选择器将样式应用于网页；选择器使您可以定位特定元素或元素集。通常，当您开始使用 CSS 时，您会先使用元素选择器，然后再使用类和 ID。

尽管这些选择器非常强大，但它们可能会受到很大限制，从而无法根据状态选择元素。如果您曾经使用过 react 和 vue 等前端框架，您可能会理解状态的含义。我指的不是应用程序的整体状态，而是 html 代码中元素的状态。

简陋的链接是一个简单的例子——它可以使用锚标签创建<a>。然后链接可以有不同的状态：

在点击链接之前
当用户将鼠标光标悬停在链接上时
当链接被访问时

用于根据元素状态定位元素的选择器称为伪类。nth-child并且nth-of-type是基于位置选择元素的伪类（元素的位置也被认为是一种状态）。让我们仔细看看。

揭秘 CSS 伪类（:nth-child vs. :nth-of-type）第1张

如何使用 :nth-child()

nth-child伪类用于根据元素在同级列表中的位置来选择元素。这里有几点需要注意：

兄弟姐妹：存在父元素和子元素的地方。在选择兄弟姐妹时，您试图针对所选父母的特定孩子。A ul和一堆li是父元素和子元素的示例。
元素在其兄弟元素列表中的位置由传递给伪类的值确定。

我们将使用下面的 HTML 代码来了解其 nth-child工作原理。

<ul>
  <li>Ruby</li>
  <li>python</li>
  <li>javascript</li>
  <li>Go</li>
  <li>php</li>
  <li>Scala</li>
  <li>java</li>
  <li>kotlin</li>
  <li>C++</li>
  <li>C</li>
</ul>

有两种不同的方式来指定元素的位置：使用关键字和功能符号。

:nth-child(偶数/奇数)

如果使用关键字，您可以指定位置为数字even或odd数字的元素，如下所示：

ul :nth-child(even) {
color: red;
}

ul :nth-child(odd) {
color: gray;
}

这给了我们以下信息：

See the Pen :nth-child(even/odd) demo by Envato Tuts+ (@tutsplus) on CodePen.

:nth-child(2)

当我们指定一个特定的数字（如本例中的 2）时，我们正在选择位置与我们传递的数字匹配的兄弟元素列表中的元素。在这里，我们的目标是无序列表的第二个孩子。

ul {
color: gray;
}

ul :nth-child(2) {
color: red;
}

您可能可以想象结果是什么样的：

See the Pen :nth-child(2) demo by Envato Tuts+ (@tutsplus) on CodePen.

这里的一个常见缺陷是在指定元素之后，您可能会向父元素添加一个新元素（如标题），而没有意识到所选元素会发生变化。为了显示这一点，让我们在列表中添加一个标题，如下所示：

<ul>
  <h3>Programming Languages</h3>
  <li>Ruby</li>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Go</li>
  <li>PHP</li>
  <li>Scala</li>
  <li>Java</li>
  <li>Kotlin</li>
  <li>C++</li>
  <li>C</li>
</ul>

尽管这实际上是对 HTML 的无效使用，但浏览器仍然会很好地呈现它，在这种情况下，第一个 li 元素将被选中，因为它现在是无序列表的第二个子元素。

See the Pen :nth-child(2) demo by Envato Tuts+ (@tutsplus) on CodePen.

:nth-child(An)

好的，现在我们将其提升一个档次。在这里，我们选择的元素（复数）将使用功能符号来确定。 n 表示一个计数器并 A 表示循环的大小，给我们一个序列。例如，当我们传递 2 时，它将选择序列 2、4、6 等中的元素：

ul :nth-child(2n) {
color: red;
}

要查看它的实际效果，让我们回到我们的 HTML 代码并在列表中添加一些项目。我们还将使列表成为有序列表，以便我们可以清楚地看到项目的编号：

<ol>
  <li>Ruby</li>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Go</li>
  <li>PHP</li>
  <li>Scala</li>
  <li>Java</li>
  <li>Kotlin</li>
  <li>C++</li>
  <li>C</li>
  <li>Cobol</li>
  <li>Fortran</li>
</ol>

我们的结果如下：

See the Pen :nth-child(2n) demo by Envato Tuts+ (@tutsplus) on CodePen.

:nth-child(An+B)

在这里，我们在循环中添加了一个额外的计算：+B. 在同级列表中的位置与模式匹配的元素将被选中。我们需要知道计算是如何发生的，所以让我们试试这样的函数符号：

ol {
color: gray;
}

ol :nth-child(3n+1) {
color: red;
}

这将选择位置与 1、4、7、10 等匹配的项目：

See the Pen :nth-child(2) demo by Envato Tuts+ (@tutsplus) on CodePen.

计算从开始计数0，这是的默认值n，因此要设置样式的元素将按如下方式计算：

第一个元素：3(0) + 1 = 1。
第二个元素：3(1) + 1 = 4。
第三个元素：3(2) + 1 = 7。
第四元素：3(3) + 1 = 10.

将其视为一个代数方程，其中的值以n算术方式增加，而要设置样式的元素是方程的结果。这是另一个示例，您可以自己编辑以查看会发生什么：

ol :nth-child(3n+2) {
color: red;
}

See the Pen :nth-child(2) demo by Envato Tuts+ (@tutsplus) on CodePen.

您还可以使用此方法选择偶数，使用公式：

ol :nth-child(2n+0) {
color: red;
}

可以使用以下方法选择奇数：

ol :nth-child(2n+1) {
color: red;
}

如何使用 :nth-of-type()

在我们看到的所有关于 nth-child 伪类的示例中，重要的是要注意目标是在同级列表中选择元素。这不考虑元素类型。为确保选择也适用于特定类型，我们可以使用 nth-of-type 伪类。

为了在工作中看到这一点，让我们编辑 HTML 代码，使其看起来像这样（同样，这在技术上是对 HTML 的滥用，但浏览器会很好地解释它）：

<ol>
  <p>This is a first paragraph<p>
  <li>Ruby</li>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Go</li>
  <li>PHP</li>
  <p>Here is a paragraph</p>
  <li>Java</li>
  <li>Kotlin</li>
  <li>C++</li>
  <li>C</li>
  <li>Cobol</li>
  <li>Fortran</li>
</ol>

要选择li位置为奇数的元素，我们可以这样做，