【譯】重拾 CSS 僞類選擇器 nth-of-type, nth-child

常常性的弄混這個系列的僞類選擇器，今天在遇到一個 css 問題以後，決定從文檔參考，完全弄明白它們的含義和使用

下述翻譯僅表明做者觀點，若是錯誤，請及時指正

child：父級下的全部子元素

:nth-child

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n
:nth-child(an+b) 僞類表明：在文檔樹中，這個元素以前有 an+b-1 個兄弟元素（n的取值爲 正整數和零）

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>
複製代碼

.parent{
  :nth-child(1) {
    color:#f00;
  }
}
複製代碼

:nth-last-child

The :nth-last-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings after it in the document tree, for any positive integer or zero value of n
:nth-last-child(an+b) 僞類表明：在文檔樹中，這個元素以後有 an+b-1 個兄弟元素（n的取值爲 正整數和零）

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>
複製代碼

.parent{
  :nth-last-child(2) {
    color:#f00;
  }
}
複製代碼

:first-child

Same as :nth-child(1). The :first-child pseudo-class represents an element that is first in a list of siblings
等同於 :nth-child(1) ，表明兄弟元素中的第一個元素

:last-child

Same as :nth-last-child(1). The :last-child pseudo-class represents an element that is last in a list of siblings.
等同於 :nth-last-child(1) ，表明兄弟元素中的最後一個元素

:only-child

The :only-child pseudo-class represents an element that has no siblings. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity
:only-child 僞類表明：有且只有一個子元素（獨生子）,等價於 :first-child:last-child 或 :nth-child(1):nth-last-child(1)，但權重較後者低

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>

<div class="parent">
   <p class="child p">only one child</p>
</div>
複製代碼

.parent{
  :only-child {
    color:#f00;
  }
}
複製代碼

type：父級下的同一類型的全部子元素

:nth-of-type

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n
:nth-of-type(an+b) 僞類表明：在文檔樹中，在它以前有 an+b-1 個具備和它相同標籤名的兄弟元素 （n的取值爲 正整數和零）

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>

複製代碼

.parent{
  :nth-of-type(1) {
    color:#f00;
  }
}
複製代碼

:nth-last-of-type

The :nth-last-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n
:nth-last-of-type(an+b) 僞類表明：在文檔樹中，這個元素以後有 an+b-1 個具備和它相同標籤名的兄弟元素（n的取值爲 正整數和零）

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>
複製代碼

.parent{
  :nth-last-of-type(1) {
    color:#f00;
  }
}
複製代碼

:first-of-type

Same as :nth-of-type(1). The :first-of-type pseudo-class represents an element that is the first sibling of its type.
等同於 :nth-of-type(1) 。表明和它具備相同類型的第一個兄弟元素

:last-of-type

Same as :nth-last-of-type(1). The :last-of-type pseudo-class represents an element that is the last sibling of its type 等同於 :nth-last-of-type(1) 。表明和它具備相同類型的最後一個兄弟元素

:only-of-type

The :only-of-type pseudo-class represents an element that has no siblings with the same expanded element name. Same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), but with a lower specificity.
:only-of-type 僞類表明：有且只有一種和它類型相同的子元素,等價於 :first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1)，但權重較後者低

<div class="parent">
   <div class="child d">d1</div>
  <div class="child d">d2</div>
   <p class="child p">p1</p>
  <p class="child p">p2</p>
</div>

<div class="parent">
   <div class="child d">only one div</div>
   <p class="child p">only one p</p>
</div>
複製代碼

.parent{
  :only-of-type{
    color:#f00;
  }
}

複製代碼

參考

w3c

www.w3.org/TR/selector…

demo

codepen.io/Yangfan2016…