使用第一个子女选择具有特定班级的表格行

Question

我发现了一个奇怪的错误，其中CSS :first-child选择器似乎无法为我选择表格行。

我有以下表

<table> 
    <tr class="a"> 
     <td>a</td> 
    </tr> 
    <tr class="b"> 
     <td>b</td> 
    </tr> 
    <tr class="b"> 
     <td>b</td> 
    </tr> 
    <tr class="c"> 
     <td>c</td> 
    </tr> 
    <tr class="c"> 
     <td>c</td> 
    </tr> 
</table> 

我想tr.b.的第一个实例之前添加一行

此代码将无法正常工作：

$("table tr.b:first-child").before("<tr><td>using css selector</td></tr>"); 

但这将正常工作：

$("table tr.b").first().before("<tr><td>using jquery first()</td></tr>"); 

这是一个已知的问题，还是我做错了什么？我不介意使用jQuery，但我不明白为什么这不适用于纯CSS。

下面是它的一个小提琴：

http://jsfiddle.net/5d6YX/

Answer 1

这是怎么猜想work.The :first伪类相当于:eq(0)。它也可以写成:lt(1)。虽然这只匹配一个元素，但:first-child可以匹配多个元素：每个父元素一个。

试试这个：

$("table tr.b:first").before("<tr><td>css selector</td></tr>"); 

OR

$("table tr.b:eq(0)").before("<tr><td>css selector</td></tr>"); 

Working Demo

Answer 2

试试这个

$("table tr.b:first").before("<tr><td>css selector</td></tr>"); 

DEMO

Answer 3

$("table tr.b:first")将做的伎俩。

Answer 4

只是关于CSS与选择器同步。

在CSS，你selecteur是：

table tr:first-child + tr.b 

，只选择seconf行，如果它有一流的.b

选择第一.B类，你需要重写规则。

tr.b {/*set my rule */ 
tr.b ~tr.b {/*reset my rule */ 

这将是很好，有这样的CSS选择器avalaible的：:first-of-class('myclass');