了解 CSS:nth-child() 選擇器

與所有 CSS 選擇器一樣，您可以使用:nth-child() 來識別網頁中的元素並向它們套用樣式。但是這個選擇器可以讓您根據相對位置縮小一組兄弟姐妹的範圍。

此選擇器提供了基本的關鍵字選項和基於模式的高級語法來滿足各種要求。您可以從遵循重複模式的簡單選擇中進行選擇，也可以採用複雜的規格來滿足您的特定需求。

##:nth-child() 選擇器語法

作為 CSS 偽類選擇器，:nth-child() 語法與其他選擇器的區別在於它採用一個參數，該參數用作識別一組兄弟元素中的元素的模式。

 :nth-child(args) {
    /*...*/
} 

主要重點在於括號內的內容，它描述了要從中選擇的特定元素子集。

對常見情況使用關鍵字值

這個特定的選擇器設計用於處理兩個不同的關鍵字值，即“奇數”和“偶數”。事實證明，這些值在表中實作替代行樣式時非常有效。

一個簡單的枚舉可以作為可以使用這些關鍵字指定的情況的說明性實例:

 <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol> 

利用 :nth-child(odd) 選擇器，可以修改具有奇數索引的每個後續清單項目的色調:

 :nth-child(odd) {
    color: red;
} 

這些項目從 1 開始編號，因此第一個項目將以紅色顯示，然後是第三個項目，隨後是每個後續的第三個項目。

函數符號更加靈活

我們可以利用一個單獨的正整數來選擇一個特定的分量，如下所示:

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

在這種情況下，選擇器僅適用於所提供清單中的第四個元素:

這種特定的語法實例涉及基於特定模式選擇元素，並且屬於執行此功能的更廣泛的功能語法類別。

 :nth-child(An\+B) {
    /*...*/
} 

在這個特定的符號中，我們用“A”表示增量或步長，它表示選擇器前進以選擇後續項目的頻率。透過這種方法，人們可以選擇定期選擇項目，例如每隔一個項目或每隔三個項目等等。相反，“B”代表選擇開始的初始點。

例如，採用參數 3n\+1:

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

從初始元素開始選擇過程，然後將跳過兩個元素並移至下一個後續元素:

將其與表達式 3n\+2 進行比較:

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

更新後的程式碼將從清單的第二個元素開始選擇項目，而不是從第一個元素開始，同時仍遵循每第三個項目選擇的模式。

另一個有趣的例子是:nth-child(n\+3):

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

給定的指令涉及選擇一系列項目，其中它從第三個元素開始一直持續到結束。產生的序列應採用如下所示的形式:

人們也可以採用減法過程來獲得特定的結果。

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

給定的範例與傳統做法不同，它從負索引開始選擇過程，導致選擇序列中的第二個元素，後跟第五個及後續項:

文法

:nth-child() 偽類允許使用帶有選擇器的關鍵字“of”，作為其括號內的參數。透過採用這種語法，人們可以限制基本模式能夠從中選擇的元素的範圍，從而增加選擇過程的特異性和精確度。

考慮一個場景，其中標記與初始版本相比更加複雜:

 <ol>
    <li class="old">Item 1</li>
    <li class="new">Item 2</li>
    <li class="new">Item 3</li>
    <li class="old">Item 4</li>
    <li class="new">Item 5</li>
    <li class="new">Item 6</li>
    <li class="new">Item 7</li>
</ol> 

若要使用特定類別定位元素並使用 CSS 選擇該群組中的每隔一個項目，可以將「:nth-child」偽類別與所需的類別選擇器結合使用。這允許根據特定元素在匹配元素序列中的位置來精確選擇和修改特定元素。

 .new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
} 

請注意，只有奇數粗體條目顯示為紅色:

此外，請反思li.new:nth-child(even) 和:target 之間的差異，當它們是偶數或包含ID 為「moredetails」的子元素時，這些選擇器分別以「.new ”元素為目標”，如我們先前的實例所示。前者適用於所提供插圖中的實例 2 和 6。

使用:nth-child() 選擇器

使用:nth-child() 選擇器可以透過在網站內容中實現充滿活力的色調來產生獨特的美感，包括強調表格資料結構中的各個行和列。此外，將此選擇器與其他 CSS 選擇器整合可以利用它們的組合功能來建立複雜的視覺方案和配置。