sách gpt4 ăn đã đi

css - nth-of-type 与 nth-child

In lại 作者:数据小太阳 更新时间:2023-10-29 09:13:24 30 4
mua khóa gpt4 giày nike

我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。

也许我的想法是错误的,但是考虑到这个结构


A

B

1

2

3


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

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

但是,至少在这里的 chrome 中,它不会选择它。它仅在它是行中的第一个子项时才有效,这与 nth-child 相同- 因此,这和 nth-of-type 有什么区别? ?

câu trả lời hay nhất

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


Hello



Paragraph



Target



Sau đó p:nth-child(2) 将选择第二个也是 p 的 child (即带“Paragraph”的 P)。
p:nth-of-type 将选择第二个匹配的P yếu tố,(即我们的目标P) .

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


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

原因是, CSS is parsed right to left ,这意味着浏览器首先查看 :nth-of-type(1),确定它搜索类型为 phân chia 的元素,即也是其类型中的第一个,与 .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/9313769/

30 4 0
Đề xuất bài viết: CSS3 平移弧线
Đề xuất bài viết: css - 如何在 CSS 中为元素设置旋转点?
Đề xuất bài viết: css - 使用 css 限制响应图像的高度
Đề xuất bài viết: CSS 变换偏斜
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress