第 n 个类型 vs 第 n 个孩子 [英] nth-of-type vs nth-child

问题描述

我对 nth-of-type 伪类以及它应该如何工作感到有些困惑 - 特别是与 nth-child 类相比.

也许我有错误的想法，但鉴于这种结构

<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>

..第三个子元素(第一个带有类标签)应该(也许?)可以用

来选择

.row .label:nth-of-type(1) {/* 一些规则 */}

但是，至少在 chrome 中，它没有选择它.它只有在它是行中的第一个孩子时才有效，这与 nth-child 相同 - 因此，这与 nth-of-type?

解决方案

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

<h1>你好</h1><p>段落</p><p>目标</p>

然后p:nth-child(2)会选择第二个也是p的子元素(即带有段落"的p).
p:nth-of-type 将选择第二个匹配的p元素，(即我们的目标p).

这是一篇很棒的文章关于这个主题，Chris Coyier @ CSS-Tricks.com

<小时>

你的中断的原因是因为type是指元素的类型(即div)，但第一个div与你提到的规则不匹配(.row .label)，因此该规则不适用.

原因是，CSS 解析正确向左，这意味着浏览器首先查看 :nth-of-type(1)，确定它搜索的是 div<类型的元素/code> 也是其类型中的第一个，与 .row 元素和第一个 .icon 元素匹配.然后它读取元素应该有 .label 类，它不匹配上述任何内容.

如果您想选择第一个标签元素，您要么需要将所有标签包装在它们自己的容器中，要么简单地使用 nth-of-type(3)(假设有将始终是 2 个图标).

另一种选择，(可悲的是)使用...等待它...jQuery:

$(function () {$('.row .label:first').css({背景颜色:蓝色"});});

I am a bit confused about the nth-of-type pseudo class, and how this is supposed to work - especially as compared to the nth-child class.

Maybe I have the wrong idea, but given this structure

<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>

..the third child element (first with class label) should (perhaps?) be selectable with

.row .label:nth-of-type(1) {
    /* some rules */
}

However, at least in chrome here, it doesn't select it. It only appears to work if it is the first child in the row, which is the same as nth-child - therefore, what is the difference between this and nth-of-type?

解决方案

The nth-child pseudo-class refers to the "Nth matched child element", meaning if you have a structure as follows:

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

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

Then p:nth-child(2) will select the second child which is also a p (namely, the p with "Paragraph").
p:nth-of-type will select the second matched p element, (namely, our Target p).

Here's a great article on the subject by Chris Coyier @ CSS-Tricks.com

---

The reason yours breaks is because type refers to the type of element (namely, div), but the first div doesn't match the rules you mentioned (.row .label), therefore the rule doesn't apply.

The reason is, CSS is parsed right to left, which means the the browser first looks on the :nth-of-type(1), determines it searches for an element of type div, which is also the first of its type, that matches the .row element, and the first, .icon element. Then it reads that the element should have the .label class, which matches nothing of the above.

If you want to select the first label element, you'll either need to wrap all of the labels in their own container, or simply use nth-of-type(3) (assuming there will always be 2 icons).

Another option, would (sadly) be to use... wait for it... jQuery:

$(function () {
    $('.row .label:first')
        .css({
            backgroundColor:"blue"
        });
});

这篇关于第 n 个类型 vs 第 n 个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！