css-nth-of-type vs nth-child

我有点困惑的第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"
        });
});

原文地址：https://www.jb51.cc/css/220110.html