CSS3選擇器「:nth-child(an+b)」快速選擇單雙或倍數元素

發表於 更新於 分類於

備註: 之後寫一篇:nth-of-type()

簡述「:nth-child(an+b)」

w3school中對其地介紹為：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

操作:nth-child

實用「:nth-child(odd)及:nth-child(even)」

  • 使用:nth-child(odd)或:nth-child(even)選取相同父元素下奇數個子元素或偶數個。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//HTML  
<ul>
     <li class="nthChildLi">1</li>
     <li class="nthChildLi">2</li>
     <li class="nthChildLi">3</li>
     <li class="nthChildLi">4</li>
</ul>

//CSS
li:nth-child(odd) {
  background: yellow; 
}

li:nth-child(even) {
  background: purple; 
}

一開始以為是選取ul:nth-child(odd)，這是錯誤的，應該是選取ul下面的子元素(要去做樣式的元素)才對，正確來說是在相同父元素(ul)下的每個子元素都有順序並且是透過這些順序去選取單數或偶數。

來看看下面這段程式碼與上面的差別

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//HTML
<ul>
     <h3>標題</h3>
     <li class="nthChildLi">1</li>
     <li class="nthChildLi">2</li>
     <li class="nthChildLi">3</li>
     <li class="nthChildLi">4</li>
</ul>

//CSS
li:nth-child(odd) {
  background: yellow;
}

li:nth-child(even) {
  background: purple;
}

比較完之後發現，怎麼都是選擇li:nth-child(odd)跟li:nth-child(even)，結果卻不一樣，這時候回歸一開始:nth-child()的介紹：属于其父元素的第 N 个子元素，不论元素的类型。

所以對下面的這個程式碼來說，<h3>才是其父元素下順序為1的子元素，而<li>是從順序2開始計算，所以第一個<li>標籤就是li:nth-child(even)所選的第一個元素。

所以怎麼判斷要選取哪個元素，元素B到Z都是在元素A下面，:nth:child()就可以使用來選取元素B到Z，因為它們都是在相同父元素A下，但是使用時，要這樣寫 子元素:nth:child()，計算順序才是以父元素中第幾個子元素來算。

套用公式「:nth-child(an+b)」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//HTML
<div class="nthChild">
   <p class="nthChildp">1</p>
   <p class="nthChildp">2</p>
   <p class="nthChildp">3</p>
   <p class="nthChildp">4</p>
   <p class="nthChildp">5</p>
   <p class="nthChildp">6</p>
   <p class="nthChildp">7</p>
   <p class="nthChildp">8</p>
</div>

//CSS
.nthChildp:nth-child(3n) {
  background: #ff0000;
}

.nthChildp:nth-child(3n+1) {
  background: #0000ff;
}

:nth-child(an+b)中的 n 是從0開始技術的，所以上面的.nthChildp:nth-child(3n+1)，把n從0開始代入後，變成.nthChildp:nth-child(1)，所以第1個.nthChildp會套用.nthChildp:nth-child(3n+1)的樣式，以此類推，.nthChildp:nth-child(3*1+1)跟.nthChildp:nth-child(3*2+1)都會套用相同樣式{ background: #0000ff}。

特別注意

之前說過在使用:nth-child()時，參數值是以子元素的順序來計算，所以當寫出span::nth-child(1)時，你要尋找的是在相同父元素下，順序第一個子元素並且這個子元素要是<span>，但如果是順序第一個子元素但卻是<div>，很抱歉這個樣式並不會被呈現出來。

1
2
3
4
5
6
7
8
9
10
11
//HTML
<div class="nthChild">
   <span >順序1 span</span>
   <p>順序2 p</p>
   <p>順序3 p</p>
   <p>順序4 p</p>
</div>

//CSS
.nthChild span:nth-child(1)
    color: red

來試試寫<p>的樣式

1
2
3
4
5
6
7
8
9
10
//改變順序2 p的樣式
//第一種寫法
.nthChild p:nth-child(1) {
  color: green;
}

//第二種寫法
.nthChild p:nth-child(2) {
  color: blue; 
}

順序2p的顏色會是哪個？正確寫法是第二種才能改變順序2的樣式，第一種沒有任何作用。再次重申，:nth-child()中的參數是以在父元素下的子元素順序為依據，順序對了、子元素對了，才能有結果。