使用第一個子女選擇具有特定班級的表格行

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');