我想只对具有特定类的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，标题{padding:40px 100px 40px 50px;}"除了所有td元素和所有标题元素外，还对类名为test的div元素中包含的所有th元素应用了一个规则。
它与“所有td, th和标题元素都包含在一个div元素中，具有test类”不同。要做到这一点，你需要改变你的选择器:
'>'不完全支持一些旧的浏览器(我指的是你，Internet Explorer)。
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
>选择器只匹配直接子代，不匹配子代。
你想要的
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，标题{padding:40px 100px 40px 50px;}"除了所有td元素和所有标题元素外，还对类名为test的div元素中包含的所有th元素应用了一个规则。
它与“所有td, th和标题元素都包含在一个div元素中，具有test类”不同。要做到这一点，你需要改变你的选择器:
'>'不完全支持一些旧的浏览器(我指的是你，Internet Explorer)。
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
