2013-07-22 46 views
0

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

#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

+0

考虑一下'#signup .vedit TBODY> TR:第n个孩子(2)'会选择再检查是否有任何选择的元素将有'b_part3'类。 – Musa

+0

@Musa奇怪,那有效。没有选择“b_part3”类的第二个'tr'。 – alexchenco

+0

而不是从0索引?所以如果你想选择第二个,它会是'n-child(1);' – Chad

回答

1

我知道@Musa梳理出一个解决这个问题,但我会添加到刚刚记录的情况下,其他人遇到这个问题。

截至目前您的不能通过类和使用: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> 

看来,为了使第n个孩子伪类来激活,它需要直接访问元素本身,而不是它的一个节点。因此,目前主要的工作是重新考虑因素,并将您的范围提高到一个级别(或更高)。

相关问题