iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
1
Modern Web

重新學習網頁設計系列 第 4

DAY 4. CSS 選擇器 Selector (二)

selector:nth-child(an+b)

選取符合偽類別an+b規則的元素
an+b中的n為系統自動抓取值,無法人為控制,而ab則為數字
使用範例說明會更加簡單

範例(一)

div p:nth-child(3)

HTML

<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>
<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>
div p:nth-child(3) {
  color: red;
}

說明

:nth-child(an+b)我們只給單一數字b做為參數時,代表只會抓取第b個元素

選擇器 div p將會抓到範例中兩個div的所有p元素
接著套用偽類別:nth-child(3)抓取其中第三個p元素
因此兩個div元素中的第三個p元素的文字顏色都將變為紅色

範例(二)

div p:nth-child(2n)

HTML

<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>
<hr>
<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>

CSS

div p:nth-child(2n) {
  color: red;
}

說明

:nth-child(an+b)我們只給an做為參數時,代表只會抓取第a * n個元素

選擇器 div p將會抓到範例中兩個div的所有p元素
接著套用偽類別:nth-child(2n)抓取其中符合2n元素
因此兩個div元素中的第2*02*12*22*3p元素的文字顏色都將變為紅色
而由於2*0 = 0因此只會看到第2, 4, 6p元素變色。

範例(三)

ol li:nth-child(3n+1)

HTML

<ol>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
</ol>

CSS

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

說明

選擇器 ol li將會抓到範例中ol的所有li元素
接著套用偽類別:nth-child(3n+1)抓取其中第3n+1li元素
因此ol元素中第3*0+13*1+13*2+13*3+1 .. 的li元素的文字顏色都將變為紅色

範例(四)

div p:nth-child(3n+1)

HTML

<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <h5>Hello CSS3</h5>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>

CSS

h5 {
    color:blue;
}

div p:nth-child(3n+1) {
  color: red;
}

說明
我們設定第3n+1p元素要變為紅色,但此時第4個元素剛好不是p元素時
這時的h5當然會式樣是設定中所定義的藍色,但該h5依然屬於an+b中的一個n
因此下一個變為紅色的p元素依然是子元素中的第7個元素p而不是第8個元素p

結語

偽類別:nth-child(an+b)給了我們很大的彈性去選取集合中的元素
在實務上是非常常見的,因此在此花了較多的篇幅來介紹它
希望能給還沒使用:nth-child(an+b)的朋友有所啟發


上一篇
DAY 3. CSS 選擇器 Selector (一)
下一篇
DAY 5. CSS 選擇器 Selector (三)
系列文
重新學習網頁設計30

尚未有邦友留言

立即登入留言