gpt4 book ai didi

css - nth-of-type 与 nth-child

转载 作者:行者123 更新时间:2023-11-27 23:47:26 30 4
gpt4 key购买 nike

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

最佳答案

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"
});
});

关于css - nth-of-type 与 nth-child,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56709541/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com