我有点困惑的第n类型伪类，以及这应该如何工作 – 特别是与第n子类相比。
也许我有错误的想法，但给定这种结构
<div class="row">
<div class="icon">A</div>
<div class="icon">B</div>
<div class="label">1</div>
<div class="label">2</div>
<div class="label">3</div>
</div>
..第三个子元素(第一个有类标签)应该(可能？)可选
.row .label:nth-of-type(1) {
/* some rules */
}
但是，至少在这里的chrome，它不选择它。它只是看起来工作，如果它是行中的第一个孩子，这是相同的nth孩子 – 因此，这和类型之间的区别是什么？
解决方法
第n个子伪类指的是“第N个匹配的子元素”，意味着如果你有一个如下的结构：
<div>
<h1>Hello</h1>
<p>Paragraph</p>
<p>Target</p>
</div>
然后p：nth-child(2)将选择第二个孩子，它也是一个p(即，“Paragraph”的p)。
p：nth-of-type将选择第二个匹配的p元素(即我们的目标p)。
Here’s a great article on the subject by Chris Coyier @ CSS-Tricks.com
你的断裂的原因是因为类型指的是元素的类型(即div)，但是第一个div不匹配你提到的规则(.row .label)，因此规则不适用。
原因是，CSS is parsed right to left，这意味着浏览器首先查找：nth-of-type(1)，确定它搜索类型为div的元素，它也是其类型的第一个，与.row元素匹配，和第一个.icon元素。然后它读取元素应该有.label类，它不匹配上面的。
如果要选择第一个标签元素，您需要将所有标签包装在自己的容器中，或者只使用nth-of-type(3)(假设总是有2个图标)。
另一种选择，会(可悲的是)使用…等待它… jQuery：
$(function () {
$('.row .label:first')
.css({
backgroundColor:"blue"
});
});
