css - nth-of-type 与 nth-child

Question

我对 nth-of-type 有点困惑伪类，以及它应该如何工作——尤其是与 nth-child 相比类。

也许我的想法是错误的，但是考虑到这个结构

<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-child 相同- 因此，这和 nth-of-type 有什么区别？ ？

Answer 1

nth-child 伪类指的是“第 N 个匹配的子元素”，意思是如果你有如下结构:

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

    <p>Target</p>
</div>

然后 p:nth-child(2) 将选择第二个也是 p 的 child (即带“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"
        });
});