我只想将样式应用到具有特定类的 DIV 内的表格:
注意:我宁愿为子元素使用 css-selector。
为什么 #1 有效而 #2 无效？
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 {padding:40px 100px 40px 50px;}”将规则应用于所有 th 元素，这些元素包含在div 元素具有一个名为 test 的类，此外还有 all td 元素和 all caption 元素。
它与 div 中包含的所有 td、th 和 caption 元素不同> 类为 test 的元素”。为此，您需要更改选择器:
'>' 不完全受一些旧浏览器的支持(我正在看着你，Internet Explorer)。
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
关于css - 将 CSS 样式应用于子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/632100/