将 CSS 样式应用于子元素答案

【问题标题】：Apply CSS Style to child elements将 CSS 样式应用于子元素
【发布时间】：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 及以下版本中不可用。

标签： css css-selectors

【解决方案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，例如 //。见stackoverflow.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] 也不受支持，因此请对类使用点符号）。

【讨论】：