Question

鉴于此代码，我如何实现一种样式，使得只有表“a”单元格被填充，而不是表“a”和表“b”？

<html>
  <style type="text/css">
  table.a td {background-color:green;} 
  table.b td {background-color:red;} 
  table {width:100%;}
  table.a tr td {padding:16px;} /*styles cells of table a and b*/
  </style>
</html>
<body>
 <table class="a">
  <tr>
   <td>&nbsp;</td>
   <td>
    <table class="b">
     <tr>
      <td>foo</td>
      <td>foo2</td>
     </tr>
    </table>     
   </td>
  </tr>
 </table>
</body>
</html>

Answer 1

使用子选择器（spec）：

table.a > tbody > tr > td { padding:16px; }

浏览器似乎插入了'缺失'tbody元素，因此table.a > tr > td无效。

Answer 2

尝试使用直接子选择器table.a > tr{"my styles"}

样式表的单元格没有样式子表格的单元格

2 个答案: