鉴于此代码,我如何实现一种样式,使得只有表"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> </td>
<td>
<table class="b">
<tr>
<td>foo</td>
<td>foo2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
使用子选择器(spec):
table.a > tbody > tr > td { padding:16px; }
浏览器似乎插入了'缺失' tbody元素,所以table.a > tr > td不会工作.