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… 🙈) We can apply the nth-child pseudo-class to only apply the new color to every other child element that’s a paragraph.

假设我们希望所有其他段落元素为淡黄色。 (一种“有趣的”样式选择…🙈)我们可以将nth-child伪类应用于仅将新颜色应用于属于段落的其他所有子元素。

article p:nth-child(odd) {
  color: goldenrod;
}

Now our paragraphs alternate colors, but did you notice what happened after the sub-header? The maroon color was repeated and then switched back to yellow. Let’s look at why that happened.

现在我们的段落是交替显示的颜色，但是您是否注意到副标题之后发生了什么？ 重复褐红色，然后切换回黄色。 让我们看看为什么会这样。

确定使用nth-child选择哪些元素 (Determining Which Elements are Selected with nth-child)

In our example above, the paragraphs that match our p:nth-child(odd) styling have to meet the following requirements in this order:

在上面的示例中，与我们的p:nth-child(odd)样式匹配的段落必须按以下顺序满足以下要求：

• they are an odd child of the parent element
  它们是父元素的奇数子代
• they are a paragraph element
  他们是一个段落元素

Determining whether the child is odd or even is not type-specific. That means the odd/even check looks at all the children in the parent element of what is being selected (the paragraph elements) and then looks for all the paragraphs that are considered odd elements.

确定孩子是奇数还是偶数不是特定于类型的。 这意味着奇数/偶数检查将查看所选内容的父元素(段落元素)中的所有子元素，然后查找被视为奇数元素的所有段落。

The paragraphs that have the yellow font styling applied are “odd” children elements and they are paragraph (<p>) elements. 👩‍🎤 That explains why the paragraph after the sub-header ends up being the default maroon color– it’s actually an “even” child!

应用了黄色字体样式的段落是“奇数”子元素，它们是段落( <p> )元素。 🎤这解释了为什么副标题后面的段落最终成为默认的栗色-它实际上是一个“偶”子！

---

---

使用CSS的第n个类型的伪类 (Using CSS’s nth-of-type Pseudo-Class)

The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic.

第nth-of-type与nth-child伪类非常相似。 主要区别在于，它在检查任何其他逻辑之前会专门考虑要选择的元素的类型。

Let’s use our example from above but apply nth-of-type instead.

让我们从上面使用示例，但是应用nth-of-type 。

<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>

article p {
  color: maroon;
}

article p:nth-of-type(odd) {
  color: goldenrod;
}

The default color is still maroon but now we’re selecting the odd paragraph elements only.

默认颜色仍然是栗色，但现在我们仅选择奇数段落元素。

The styles are now applied if the element meets the following requirement:

现在，如果元素满足以下要求，则应用样式：

• the element is a paragraph with an article element as a parent
  该元素是一个带有article元素作为父元素的段落
• of the paragraphs selected above, only odd ones are selected
  在上面选择的段落中，仅选择了奇数

If we look at this again with the annotations, it’s a little clearer how these are getting selected.

如果我们再次使用注解进行查看，那么如何选择这些注解会更加清楚。

The headers (<h1>, <h3>) are not considered at all with nth-of-type because we’re selecting by the element type specifically. We only care about the <p> elements in this case. 🔥

标头( <h1> ， <h3> )根本不考虑nth-of-type为nth-of-type因为我们是根据元素类型专门选择的。 在这种情况下，我们只关心<p>元素。 🔥

---

---

Whether you use nth-child or nth-of-type will ultimately depend on what your goal is for styling. (Classic “it depends” answer, right? 🤓)

究竟使用nth-child还是nth-of-type最终取决于样式的目标。 (经典的“取决于”答案，对吧？)

As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child. However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type. 🥳

通常，如果要选择选择器的间隔而不管元素的类型如何，请使用nth-child 。 但是，如果只想选择一种特定类型并从中应用间隔选择，请使用nth-of-type 。 🥳

---

---

浏览器支持 (Browser Support)

The nth-child and nth-of-type selectors both have excellent browser support. Check nth-child and nth-of-type on CanIUse.com for more details. You shouldn’t have any issues with either unless you’re supporting IE8 or lower. 🙈

第nth-child nth-of-type选择器和nth-of-type选择器都具有出色的浏览器支持。 有关详细信息，请检查CanIUse.com上的nth-child和nth-of-type 。 除非您支持IE8或更低版本，否则您都不会有任何问题。 🙈

翻译自: https://www.digitalocean.com/community/tutorials/css-css-nth-child-vs-nth-of-type

css nth-child