经常性的弄混这个系列的伪类选择器，今天在遇到一个 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;
}
}
