对子元素应用CSS样式
对子元素应用CSS样式
提问于 2009-03-10 20:19:35
我只想将样式应用于具有特定类的DIV中的表：
注意:我更喜欢对子元素使用css选择器。
为什么#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>我做错了什么？
回答 7
Stack Overflow用户
发布于 2012-05-25 03:23:46
.test * {padding: 40px 100px 40px 50px;}Stack Overflow用户
发布于 2009-03-10 20:22:54
> selector仅匹配直接子项，而不匹配子项。
你想要的
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显示为any <th> which is a **direct** child of <div class="test">，这意味着它将匹配<div class="test"><th>this</th></div>，但不会匹配<div class="test"><table><th>this</th></table></div>
Stack Overflow用户
发布于 2013-05-02 14:55:15
如果你想在所有子标签中添加样式，且没有html标签的规范，那么可以使用它。
父标签div.parent
div.parent中的子标签，如<a>、<input>、<label>等。
代码：div.parent * {color: #045123!important;}
你也可以删除重要的，它不是必需的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/632100
复制相关文章
相似问题
腾讯云开发者
