从选择一个元素只能通过CSS选择

设置我有一个表：从选择一个元素只能通过CSS选择

<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选择器将被接受。

来源

2013-04-16 Jettary

只有第一个元素。 querySelector（“td.editable：first”） – Jettary

'querySelector（'td.editable'）'会返回第一个元素，但这是因为querySelector（）总是限制对第一个匹配的选择。如果使用'querySelectorAll（'td.editable'）'，它将返回所有这些，除非您专门使用该方法，否则这不是您想要的。 – BoltClock

你可以使用的第n个孩子选择。使用一个来获得所需的确切表格行，然后使用第二个第n个孩子来获得所需的确切<td>元素。例如，如果我想在第二排，并与一类=第二<td>元素“编辑”我可以这样做：

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

来源

2013-04-16 13:47:04 officert

谢谢，这有助于。 – Jettary

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

来源

2013-04-16 13:43:11

cssSelector（“td.editable：nth-child（1）”）将返回第一组“可编辑”的td元素。 – Jettary

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

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

来源

2013-04-16 13:48:35 blackhawk

不知道这是你想要的，但试试这个：

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

Demo

来源

2013-04-16 13:49:19 Eli

从选择一个元素只能通过CSS选择

回答

相关问题