<p>:nth-child()偽類在CSS中用於根據(jù)元素位置精準選擇特定子元素。其基本語法為element:nth-child(n)，可選擇第n個子元素，支持odd、even及an b公式，如2n 1或n 3，分別實現(xiàn)奇偶行選擇或自定義間隔與起始點。例如tr:nth-child(even)為表格偶數(shù)行添加背景色。與:nth-of-type()不同，:nth-child()計算所有子元素，而前者僅計算同類元素。常見用途包括斑馬紋表格、畫廊佈局、導航菜單與表單排版，實際使用時需結(jié)合具體HTML結(jié)構(gòu)靈活應(yīng)用並測試驗證。

<p>

<p>當你want to target specific elements in a list based on their position, :nth-child() is one of the most useful pseudo-classes in CSS. It lets you select every nth element among a group of siblings — for example, every other row in a table or alternating colors in a list.

<p> Here's how it works and when to use it.

---

Understanding the Basic Syntax

<p> The basic structure looks like this:

 element:nth-child(n) {
  /* styles here */
}

<p> This will select the nth child regardless of what type of element it is . So if you write li:nth-child(2) , it will match the second child of its parent only if that child is an <li> . If it's a <div> or something else, it won't match.

<p> Common values for n include:

<li> 1 , 2 , 3 — selects the first, second, third item, etc.<li> odd — selects every odd-numbered child (1st, 3rd, 5th…)<li> even — selects every even-numbered child (2nd, 4th, 6th…)

<p> For example:

 tr:nth-child(even) {
  background-color: #f2f2f2;
}

<p> This gives every even table row a light gray background.

---

Using Formulas Like n 3 or 2n 1

<p> :nth-child() also accepts formulas in the form of an b .

<p> Here's how that breaks down:

<li> a is the interval (like every 2nd, 3rd, etc.)<li> b is the offset

<p> Some common examples:

<li> 2n 1 → same as odd<li> 2n → same as even<li> 3n → every third child<li> n 4 → starts from the 4th child onward

<p> Let's say you want to highlight every third item in a list:

 li:nth-child(3n) {
  color: red;
}

<p> That would make the 3rd, 6th, 9th, etc., items red.

<p> Or if you want to start styling from the 5th item onward:

 li:nth-child(n 5) {
  font-weight: bold;
}

---

Difference Between :nth-child() and :nth-of-type()

<p> It's easy to confuse these two, but the key difference is:

<li> :nth-child() counts all children , no matter the tag type.<li> :nth-of-type() only counts elements of the same type .

<p> So if your HTML looks like this:

 <div>
  <p>Paragraph 1</p>
  <span>Span</span>
  <p>Paragraph 2</p>
</div>

<p> Then:

 p:nth-child(3) { color: red; }

<p> …will work because the third child is a <p> . But:

 p:nth-child(2) { color: blue; }

<p> …won't apply anything because the second child is a <span> , not a <p> .

<p> If instead you used:

 p:nth-of-type(2) { color: blue; }

<p> …it would target "Paragraph 2" because it's the second <p>

in the list, regardless of other tags mixed in.

---

Practical Use Cases

<p> Here are a few real-world situations where :nth-child() shines:

<li> Zebra-stripe tables: Alternate row backgrounds for better readability. <li> Gallery layouts: Apply different styles or margins to every other image. <li> Navigation menus: Style the last few items differently without extra classes. <li> Form layout: Space out or align every third input field.

<p> Just remember: always test in browser dev tools to make sure it's targeting what you expect, especially if the HTML structure isn't perfectly uniform.

---

<p>基本上就這些。只要理解了公式和匹配邏輯， :nth-child()就不難掌握。關(guān)鍵是在實際結(jié)構(gòu)中靈活使用它，而不是硬套公式。

以上是如何使用：nth-????child（）偽級？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！