0

我有一张桌子：

<table>
<thead>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>row 1</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 2</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 3</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 4</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
    <tr>
        <td>row 5</td>
        <td class="editable">value 1</td>
        <td class="editable">value 2</td>
    </tr>
</tbody>
</table>

如何从 中仅选择（仅使用 CSS 选择器）一个元素td.editable？jQuery:first选择器的模拟是可以接受的。

4

4 回答 4

1

您可以使用第 n 个子选择器。使用一个来获取您想要的确切表格行，然后使用第二个第 n 个子项来获取<td>您想要的确切元素。例如，如果我想要第二行，第二个<td>带有 class="editable" 的元素，我可以这样做：

tr:nth-child(2) > td.editable:nth-child(2)
于 2013-04-16T13:47:04.560 回答
0

在兼容的浏览器上，您可以使用:nth-child 伪类

于 2013-04-16T13:43:11.953 回答
0

这是您唯一的 td.editable 表吗？尝试这样的事情......

td.editable:nth-child(2) //or 3 or 4, etc...
于 2013-04-16T13:48:35.707 回答
0

不确定这是你想要的，但试试这个：

table > tbody > tr > td:nth-child(2) {
    color: red;
}

演示

于 2013-04-16T13:49:19.977 回答