當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2023/12/14 CSS 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 。

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