类型n与子n

我对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?之间有什么区别?

回答:

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将选择第二个 (即我们的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"

});

});

以上是 类型n与子n 的全部内容, 来源链接: utcz.com/qa/423135.html

回到顶部