css nth-child_揭开CSS伪类的神秘面纱（：nth-​​child vs.:nth-of-type）

css nth-child

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

尽管这些选择器功能强大，但它们可能具有很大的局限性，因此无法根据其状态选择元素。 如果您曾经使用过React和Vue等前端框架，那么您可能会了解状态的含义。 我指的不是应用程序的整体状态，而是HTML代码中元素的状态。

谦虚链接是一个简单的示例–可以使用锚标记<a>创建。 链接然后可以具有不同的状态：

• 在点击链接之前
• 当用户将鼠标指针悬停在链接上时
• 访问链接时

用于根据元素的状态作为目标的选择器称为伪类 。 nth-child和nth-of-type是伪类，它们根据元素的位置选择元素（元素的位置也被视为状态）。 让我们仔细看看。

如何使用：nth-​​child（）

第nth-child伪类用于根据元素在同级列表中的位置选择元素。 这里要注意一些事情：

• 兄弟姐妹 ：存在父元素和子元素的地方。 在选择同级时，您要针对所选父级的特定子级。 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;
}

这给我们以下内容：

：nth-​​child（2）

当我们指定一个特定的数字（例如本例中的2）时，我们在同级兄弟列表中选择其位置与我们传递的数字相匹配的元素。 在这里，我们针对无序列表的第二个子对象。

ul {
  color: gray;
}

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

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

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

<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元素，因为它现在是无序列表的第二个子元素。

：nth-​​child（一个）

好的，现在我们要解决这个问题。 在这里，我们选择的元素 （复数）将使用功能符号来确定。 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>

我们的结果如下：

：nth-​​child（An + B）

在这里，我们为循环添加了额外的计算： +B 在兄弟姐妹列表中位置与模式匹配的元素将被选中。 我们需要知道计算是如何发生的，所以让我们尝试这样的功能符号：

ol {
  color: gray;
}

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

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

计算从默认值n 0开始计数，因此要样式化的元素将按以下方式计算：

• 第一个元素：3（0）+1 = 1 。
• 第二个元素：3（1）+1 = 4 。
• 第三元素：3（2）+1 = 7 。
• 第四元素：3（3）+1 = 10 。

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

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

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

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元素，我们可以这样做，

ol li:nth-of-type(odd) {
  color: red;
}

这给了我们：

要选择位置为偶数的li元素，我们可以

ol li:nth-of-type(even) {
  color: red;
}

您可能会认为，使用nth-child只要指定li就可以有效地工作，例如：

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

但事实并非如此。 自己尝试！

结论

当您必须在同级列表中选择特定元素时，这些伪类会派上用场。 要了解有关它们的更多信息，请检查MDN Web文档中的nth-child()和nth-of-type() 。

翻译自: https://webdesign.tutsplus.com/tutorials/demystifying-css-pseudo-classes-nth-child-vs-nth-of-type--cms-34221

css nth-child