类型n与子n

一尘不染

类型n与子n

css

我对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-因此，this和nth-of-type？之间有什么区别？

阅读 651

2020-05-16

共1个答案

一尘不染

该nth-child伪类指的是“第N个匹配的子元素”，如果你有一个结构如下含义：

<div>
    <h1>Hello</h1>

    <p>Paragraph</p>

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

然后p:nth-child(2)将选择第二个也是ap的孩子（即p带有“ Paragraph”的）。 p:nth-of-type将选择第二个 匹配的p元素（即我们的Target p）。

您之所以中断，是因为type是指元素的类型（即div），但是第一个div与您提到的规则（.row .label）不匹配，因此该规则不适用。

原因是，CSS是从右到左解析的，这意味着浏览器首先在上查找:nth-of-type(1)，确定它搜索type的元素div，这也是该类型.row的第一个元素，该元素与第一个.icon元素相匹配。然后，它会读取该元素应具有的.label类，该类与上述任何内容都不匹配。

如果要选择第一个label元素，则需要将所有标签包装在它们自己的容器中，或者简单地使用nth-of-type(3)（假设总会有2个图标）。

另一个选择是（悲伤地）使用…等待… jQuery：

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

2020-05-16