Question

我正在尝试仅设置此特定表的前两个元素：

<table class="myTable">
    <tbody>
       <tr>
           <td>some stuff</td>   <--- needs style
           <td>some stuff</td>   <--- needs style
           <td>some stuff</td>
           <td>some stuff</td>
           <td>some stuff</td>
        </tr>
     </tbody>
</table>

我的HTML页面上存在多个表格，所以我不相信我想要使用第一个孩子或第n个子选择器。最好的方法是什么？提前谢谢。

Answer 1

实际上，如果该类对于相关表格而言是唯一的，那么nth-child就是最佳选择：

.myTable tr:first-child td:nth-child(1), 
.myTable tr:first-child td:nth-child(2) {
  background-color: red;
}

...假设您只想在表格的第一行设置前两列的样式。否则，对于所有行：

.myTable td:nth-child(1), 
.myTable td:nth-child(2) {
  background-color: red;
}

示例：http://codepen.io/paulroub/pen/eogcb

Answer 2

在表格上放置一个Id，然后通过id

访问选择器

OR

如果那不可能试试这个

$('.myTable td:lt(3)').addClass('yourClass');

PS：请记住，n-孩子是基于1而不是0的索引。

Answer 3

您可以轻松地将nth-child选择器用于特定类甚至更严格的ID。是什么让你认为在这种情况下你不能使用它们？

基于父级的样式元素

3 个答案: