:last-child用于選中父元素下最后一個(gè)子元素，且類型必須匹配。例如li:last-child可去掉最后一個(gè)li邊框；但若最后一個(gè)子元素非指定類型，則不生效。使用建議包括用于去掉列表最后一項(xiàng)邊框等場景，并可通過:not(:last-child)排除最后一項(xiàng)。:nth-child(n)則靈活選擇第n個(gè)子元素，n可以是數(shù)字、odd/even或表達(dá)式，如tr:nth-child(even)設(shè)置表格奇數(shù)行背景色。注意：其基于所有子元素計(jì)數(shù)，非同類元素也計(jì)入順序，且n從0開始。常見誤區(qū)包括結(jié)構(gòu)變動影響樣式、與:last-of-type混淆及表達(dá)式寫法錯誤。避免踩坑的方法有優(yōu)先使用:nth-of-type、用測試工具驗(yàn)證表達(dá)式、避免對動態(tài)內(nèi)容依賴結(jié)構(gòu)順序做關(guān)鍵樣式。掌握這些偽類能減少JS和class操作，提升CSS布局效率。

有時(shí)候你想單獨(dú)選中某個(gè)元素，比如最后一個(gè)或第幾個(gè)子元素，這時(shí)候普通的 CSS 選擇器可能就不夠用了。CSS 提供了一些偽類（pseudo-classes），像 :last-child 和 :nth-child，專門用來處理這類情況。

如何用 :last-child 精準(zhǔn)選中最后一個(gè)子元素？

:last-child 的作用是選中父元素下最后一個(gè)子元素。前提是這個(gè)元素必須真的是“最后一個(gè)”，而且類型要匹配。

舉個(gè)例子，如果你有一組 <li> 元素包裹在 <ul></ul> 里，想讓最后一個(gè) <li> 不顯示邊框：

li:last-child {
  border-bottom: none;
}

這樣寫就跳過了遍歷 DOM 或額外加 class 的麻煩。但要注意：如果最后一個(gè)子元素不是 <li>，而是別的標(biāo)簽，比如 <div>，那這條規(guī)則就不會生效。

使用建議：

<li>用于去掉列表最后一項(xiàng)的邊框、間距等常見場景。<li>要確保目標(biāo)元素確實(shí)是最后一個(gè)子元素，否則不生效。<li>如果你只想排除最后一個(gè)，而不是只選它，可以用 :not(:last-child)。

怎么用 :nth-child 靈活選擇特定位置的子元素？

:nth-child(n) 更靈活一些，可以選中第 n 個(gè)子元素。n 可以是數(shù)字、關(guān)鍵字（如 odd、even）或者表達(dá)式（如 2n 1）。

比如你想每隔一行換一個(gè)背景色做區(qū)分，可以這樣寫：

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

再比如你想選中第 3 個(gè) <div>，可以寫成：

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

需要注意的地方：

<li> :nth-child 是基于父元素下的所有子元素來計(jì)算順序的，不只是同類型的元素。 <li>表達(dá)式中的 n 從 0 開始計(jì)數(shù)，所以 2n 1 實(shí)際上是奇數(shù)項(xiàng)。 <li>關(guān)鍵字 odd 和 even 很方便，適合表格、圖片列表等需要交替樣式的場景。

使用這些偽類時(shí)有哪些容易踩坑的地方？

雖然這兩個(gè)偽類很好用，但有幾個(gè)細(xì)節(jié)容易出錯：

<li> 子元素順序變了，樣式也會變：比如你在 HTML 中插入了一個(gè)新元素，可能會導(dǎo)致原本選中的元素位置改變，從而影響樣式。 <li> 和 :last-of-type、:nth-of-type 混淆：:last-child 要求是最后一個(gè)子元素，而 :last-of-type 只要是該類型最后一個(gè)就行。 <li> 表達(dá)式寫法容易搞錯：比如 n 3 表示從第 3 項(xiàng)開始選，而 3n 是每三項(xiàng)選一次。

為了避免這些問題：

<li>在不確定結(jié)構(gòu)是否固定時(shí)，優(yōu)先使用 :nth-of-type。 <li>寫表達(dá)式時(shí)可以在網(wǎng)上找“偽類測試工具”驗(yàn)證效果。 <li>盡量避免依賴結(jié)構(gòu)順序來做關(guān)鍵樣式，特別是動態(tài)內(nèi)容。

基本上就這些。偽類是個(gè)小功能，但在實(shí)際開發(fā)中很實(shí)用。掌握好它們能讓你少寫 JS、少加 class，直接通過 CSS 解決很多布局問題。

以上是使用CSS偽級，例如：last-Child”或'：nth-??Child”的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！