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

这就是假设工作的方式。: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

关于CSS与选择器的对比。

在CSS中，您的选择将是：

table tr:first-child + tr.b

如果它具有类.b

，则仅选择seconf行

要选择第一个.b类，您需要覆盖该规则。

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

让这种CSS选择器变得可用是很好的：:first-of-class('myclass');

Answer 3

试试这个

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

DEMO

Answer 4

$("table tr.b:first")可以解决问题。

使用first-child选择具有特定类的表行

4 个答案: