css nth-child_比较CSS伪类：nth-child与nth-of-type

css nth-child

CSS has a number of pseudo-classes to help you style your app with ease. Having lots of options can be great, but it can also be confusing to know which pseudo-class to use and what it really does. Here we’ll look at CSS’s nth-child and nth-of-type pseudo-classes to get a better understanding of when to use each and what the actual difference is.

CSS有许多伪类，可帮助您轻松设置应用样式。有很多选项可能很棒，但是知道要使用哪个伪类以及它的实际作用也可能会造成混淆。在这里，我们将查看CSS的nth-child和nth-of-type伪类，以更好地理解何时使用每种伪类以及它们之间的实际区别。

The nth-child and nth-of-type CSS pseudo-classes are interesting compared to other types of pseudo-classes because they select elements based on their position in the DOM. Whereas some pseudo-classes select a specific state of an element (e.g. the hover, active, target pseudo-classes), nth-child and nth-of-type are more concerned with the structure of your markup.

与其他类型的伪类相比， nth-child和nth-of-type CSS伪类很有趣，因为它们基于元素在DOM中的位置来选择元素。尽管某些伪类选择元素的特定状态(例如，悬停，活动，目标伪类)，但是nth-child nth-of-type和nth-of-type更关心标记的结构。

设置我们HTML (Setting Up Our HTML)

To understand the difference between nth-child and nth-of-type, let’s first build our HTML to know what we’re going to be styling.

要了解nth-child和nth-of-type之间的区别，让我们首先构建HTML来了解样式。

Let’s say we have a section on our webpage that has a mix of header (<h1>, <h3>) and paragraph (<p>) elements.

假设我们的网页上有一部分包含标头( <h1> ， <h3> )和段落( <p> )元素。

<article><h1>Here's a Header</h1><p>I'm a paragraph with all kinds of information.</p><p>Let's add another paragraph for fun.</p><p>yadda yadda yadda</p><p>blah blah blah</p><p>yadda yadda yadda</p><h3>Here's a Subheader</h3><p>blah blah blah</p><p>And maybe just one more.</p>
</article>

This markup will look something like this:

这个标记看起来像这样：

In total, we have an <article> element as the parent, and nine child elements: one <h1>, one <h3>, and seven <p> tags.

总的来说，我们有一个<article>元素作为父元素，还有9个子元素：一个<h1> ，一个<h3>和七个<p>标记。

nth-child和nth-of-type语法 (nth-child and nth-of-type Syntax)

There are a few options for what values you can pass the nth-child and nth-of-type pseudo-classes. Note: nth-child is used here but it can be replaced with nth-of-type too.

对于可以传递第nth-child和nth-of-type伪类的值，有一些选择。注意：此处使用了nth-child ，但也可以将其替换为nth-of-type 。

:nth-child(2n+3): This option requires some math. The numbers are up to you; it’s the n that will vary. This will take your selected elements, set n to 0 to start, and increment from there. So, similarly to a for loop in JavaScript, it will iterate through your selected elements by updating the n value: 2(0)+3 = 3, 2(1)+3 = 5, 2(2)+3 = 7, and so on. The result of this will be selecting the third, fifth, seventh, etc. elements.

：nth-child(2n + 3) ：此选项需要一些数学运算。数字由您决定；是n会有所不同。这将采用您选择的元素，将n设置为0开始，并从此处开始递增。因此，类似于JavaScript中的for循环，它将通过更新n值来遍历您选择的元素： 2(0)+3 = 3 2(1)+3 = 5 2(2)+3 = 7 ，等等。这样的结果将是选择第三，第五，第七等元素。
:nth-child(odd/even): The strings odd or even can be passed to select the odd and even elements available.

：nth-child(odd / even) ：可以传递odd或even字符串以选择可用的奇数和偶数元素。
:nth-child(3n): You can also pass a number with the n variable, which will select that interval of the selected element’s occurrence. If 3 is passed, it will select the third, sixth, ninth, etc. elements.

：nth-child(3n) ：您还可以传递带有n变量的数字，该数字将选择所选元素出现的时间间隔。如果3通过，它将选择的第三，第六，第九，等元素。
:nth-child(3): If you just pass a number (without the n), it will select that element from the DOM specifically. Passing 3 will select the third matching element only.

：nth-child(3) ：如果只传递一个数字(不带n )，它将从DOM中专门选择该元素。传递3只会选择第三个匹配元素。

使用CSS的第n个子级伪类 (Using CSS’s nth-child Pseudo-Class)

The nth-child pseudo-class has two important components to consider:

第nth-child伪类具有两个要考虑的重要组成部分：

the element(s) selected that will have the pseudo-class applied to it/them所选元素将应用伪类的伪元素
the value passed to the pseudo-class.传递给伪类的值。

If we go to our CSS stylesheet for the HTML example above, we can select our paragraph elements and make the font color maroon like so:

如果转到上述HTML示例CSS样式表，则可以选择我们的段落元素，并使字体颜色maroon如下：

article p {color: maroon;
}

Let’s say we want every other paragraph element to be a yellow-ish color, though. (An “interesting” style choice…