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