gpt4 book ai didi

css - 为什么这个 nth-child 伪选择器在下表中不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 14:47:01 25 4
gpt4 key购买 nike

这是 CSS:

#signup .vedit tbody > tr.b_part3:nth-child(2) {
background: red;
}

HTML 结构:

enter image description here

如您所见,我想选择表格的第二个 .b_part tr 元素。

但由于某些原因,CSS 规则未被应用。

可能是什么问题?

实时站点:http://www.chineselearnonline.com/amember/signup4.php

最佳答案

我知道@Musa 提出了这个问题的解决方案,但我会添加它只是为了记录以防其他人遇到这个问题。

截至目前,您不能通过类分割 sibling 的部分并使用 :nth-child()。

    //Standard Use:
ul li:nth-child(2) {
color: #0cf;
}

<ul>
<li>One</li>
<li>Two</li> <!-- Highlights Two -->
<li>Three</li>
</ul>

// Attempted Use:
ul li.scope:nth-child(2) {
color: #0cf;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="scope">One</li>
<li class="scope">Two</li> <!-- Fails -->
<li class="scope">Thre</li>
</ul>

// Optional Solution:
ul.scope li:nth-child(2) {
color: #0cf;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

<ul class="scope">
<li>One</li>
<li>Two</li> <!-- Highlights Two -->
<li>Three</li>
</ul>

似乎为了激活第 nth-child 伪类,它需要直接访问元素本身而不是它的节点之一。因此,目前主要的解决方法是重构并将您的范围提升一个级别(或更高级别)。

关于css - 为什么这个 nth-child 伪选择器在下表中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17779365/

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