我想只对具有特定类的DIV内部的表应用样式:
注意:我宁愿为子元素使用css选择器。
为什么第一条可行，第二条不行?
1:
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}
2:
div.test th, td, caption {padding:40px 100px 40px 50px;}
HTML:
<html>
<head>
<style>
div.test > th, td, caption {padding:40px 100px 40px 50px;}
</style>
</head>
<body>
<div>
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
<div class="test">
<table border="2">
<tr><td>some</td></tr>
<tr><td>data</td></tr>
<tr><td>here</td></tr>
</table>
</div>
</body>
</html>
我做错了什么?
>选择器只匹配直接子代，不匹配子代。
你想要的
div.test th, td, caption {}
或者更有可能
div.test th, div.test td, div.test caption {}
编辑:
第一个说
div.test th, /* any <th> underneath a <div class="test"> */
td, /* or any <td> anywhere at all */
caption /* or any <caption> */
而第二种说法是
div.test th, /* any <th> underneath a <div class="test"> */
div.test td, /* or any <td> underneath a <div class="test"> */
div.test caption /* or any <caption> underneath a <div class="test"> */
在你的原始div.test >th说任何<th>，这是<div class="test">的**直接**子，这意味着它将匹配<div class="test"><th>this</th></div>，但不会匹配<div class="test"><table><th>this</th></table></div>
>选择器只匹配直接子代，不匹配子代。
你想要的
div.test th, td, caption {}
或者更有可能
div.test th, div.test td, div.test caption {}
编辑:
第一个说
div.test th, /* any <th> underneath a <div class="test"> */
td, /* or any <td> anywhere at all */
caption /* or any <caption> */
而第二种说法是
div.test th, /* any <th> underneath a <div class="test"> */
div.test td, /* or any <td> underneath a <div class="test"> */
div.test caption /* or any <caption> underneath a <div class="test"> */
在你的原始div.test >th说任何<th>，这是<div class="test">的**直接**子，这意味着它将匹配<div class="test"><th>this</th></div>，但不会匹配<div class="test"><table><th>this</th></table></div>
