Question

我有一张桌子：

<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选择器的模拟。

Answer 1

您可以使用第n个子选择器。使用一个来获取所需的确切表格行，然后使用第二个第n个孩子来获得所需的确切<td>元素。例如，如果我想要第二行，并且第二行<td>元素具有class =“editable”，我可以这样做：

tr:nth-child(2) > td.editable:nth-child(2)

Answer 2

在兼容的浏览器上，您可以使用the :nth-child pseudo-class

Answer 3

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

td.editable:nth-child(2) //or 3 or 4, etc...

Answer 4

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

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

<强> Demo

仅通过CSS选择器从集合中选择一个元素

4 个答案: