html - 基于父级的样式元素

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 页面上存在多个表，所以我不认为我想使用第一个 child 或第 n 个 child 选择器。最好的方法是什么？提前致谢。

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