将 CSS 样式应用于子元素
Posted
技术标签:
【中文标题】将 CSS 样式应用于子元素【英文标题】：Apply CSS Style to child elements 【发布时间】：2010-10-12 12:55:18 【问题描述】：我只想将样式应用于具有特定类的 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>
我做错了什么？
【问题讨论】：
别忘了 >、+ 和 [ ] 选择器在 IE6 及以下版本中不可用。 【参考方案1】：此代码“div.test th, td, caption padding:40px 100px 40px 50px;”将规则应用于所有div 元素所包含的div 元素，其类名为test，除了all td元素和所有 caption 元素。
它与“所有td、th 和caption 元素都包含在div 元素与test 类中”不同。为此，您需要更改选择器：
'>' 不完全被一些旧浏览器支持（我在看着你，Internet Explorer）。
div.test th,
div.test td,
div.test caption
padding: 40px 100px 40px 50px;
【讨论】：
有没有办法把 div.test 写 3 遍？ @rm 不。没有嵌套规则或“with”类型分组 @romanm 有办法写 'div.test' 3 次！研究使用 sass 或更少的框架来编写 css 文件！ :) @romanm - 请参阅我的回答，使用 * 来定位所有孩子以防止重复，或使用 .class > * 用于所有直接孩子。不难。 关于在 IE 中不受支持的提示非常有帮助，我试图让一些 CSS 在 ios 上为 DTCoreText 工作，但它不起作用，他们的解析器比 IE 差。【参考方案2】：.test * padding: 40px 100px 40px 50px;
【讨论】：
请注意，这里的 * 表示您不能用任何其他更具体的规则覆盖它，因为.test * 将是每个子元素的最具体的规则。换句话说，请记住，您放入 .test * 的任何内容都不能被任何更具体的 css 规则覆盖，因为test * 是最具体的规则。【参考方案3】：
> 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>
【讨论】：
fwiw，因为该选择器中的 td 和标题是“愚蠢的” - 它们将匹配任何给定的 th/caption 而无需考虑 div.test。除了最通用的样式之外，这种盲目定位很少是您在 CSS 中想要的。 @annakata：这是css框架的一部分，我正在尝试在本地应用它【参考方案4】：如果您想在所有子项中添加样式并且没有指定 html 标签，请使用它。
父标签div.parent
div.parent 中的子标签，例如<a>、<input>、<label> 等。
代码：div.parent * color: #045123!important;
您也可以删除重要的，它不是必需的
【讨论】：
【参考方案5】：这是我最近写的一些代码。我认为它提供了将类/ID 名称与伪类结合的基本解释。
.content
width: 800px;
border: 1px solid black;
border-radius: 10px;
box-shadow: 0 0 5px 2px grey;
margin: 30px auto 20px auto;
/*height:200px;*/
p.red
color: red;
p.blue
color: blue;
p#orange
color: orange;
p#green
color: green;
<!DOCTYPE html>
<html>
<head>
<title>Class practice</title>
<link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>
<body>
<div class="content">
<p id="orange">orange</p>
<p id="green">green</p>
<p class="red">red</p>
<p class="blue">blue</p>
</div>
</body>
</html>【讨论】：
CSS 不允许单行 cmets，例如//。见***.com/questions/4656546/…【参考方案6】：
div.test td, div.test caption, div.test th
为我工作。
子选择器 > 在 IE6 中不起作用。
【讨论】：
【参考方案7】：此代码也可以使用 SCSS 语法来解决问题
.parent
& > *
margin-right: 15px;
&:last-child
margin-right: 0;
【讨论】：
【参考方案8】：据我所知：
div[class=yourclass] table your style here;
或者在你的情况下甚至是这样的：
div.yourclass table your style here;
（但这适用于带有yourclass 且可能不是divs 的元素）只会影响yourclass 中的表。而且，正如 Ken 所说，并非所有地方都支持 >（div[class=yourclass] 也不受支持，因此请对类使用点符号）。
【讨论】：
以上是关于将 CSS 样式应用于子元素的主要内容，如果未能解决你的问题，请参考以下文章
如果它有带有 CSS 的子元素，则将样式应用于父元素 [重复]
CSS之hover的使用和鼠标移入移出事件的区别addEventListenermouseentermouseleavequerySelectorsplit+~