從選擇一個元素只能通過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選擇

回答

相關問題