将CSS样式应用于子元素

232

我只想将样式应用于具有特定类的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>

我究竟做错了什么？

css css-selectors

— 罗马米
source

不要忘记>，+和[]选择器不适用于IE6及以下版本。

— Erick

309

除了所有元素和所有元素之外，此代码“ div.test th, td, caption {padding:40px 100px 40px 50px;}” 还将规则应用于名为的类th的div元素所包含的所有元素。test td caption

它是不一样的“所有td，th和caption元件，其由包含div元素与一类test”。为此，您需要更改选择器：

>某些较旧的浏览器不完全支持“ ”（我在找您，Internet Explorer）。

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— 肯·布朗宁
source

有没有办法写div.test 3次以上？

— 罗马m

2

@rm不。没有规则的嵌套或“ with”类型分组

— 笨拙的2009年

2

@romanm可以反复编写“ div.test” 3次！研究使用sass或更少的框架编写css文件！:)

— gillyb 2014年

@romanm-请参阅我的答案，使用*定位所有子对象以防止重复，或对所有直接子对象使用.class> *。不难

— 理查德·爱德华兹

关于IE不被支持的提示非常有帮助，我试图使CSS在DTCoreText上可以在iOS上工作，但是它不起作用，他们的解析器比IE更糟糕。

— Sirens

123

.test * {padding: 40px 100px 40px 50px;}

— 理查德·爱德华兹
source

11

请注意，这里的*表示您不能用任何其他更特定的规则覆盖它，因为.test *它将是每个子元素的最特定的规则。换句话说，请记住，放到里面.test *的任何内容都不能被任何更特定的CSS规则覆盖，因为这test *是最特定的规则。

— vadasambar

81

在> 选择匹配直接孩子而已，没有后代。

你要

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 > thsays表示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>

— 格雷格
source

首先，因为该选择器中的td和标题为“哑”-它们将匹配任何给定的标题，而无需考虑div.test。除了最通用的样式外，这种盲目定位很少是CSS所需要的。

— annakata

@annakata：这是css框架的一部分，我正在尝试在本地应用它

— 罗马m

10

如果要在所有子项中添加样式，并且没有html标记的规范，请使用它。

父标签 div.parent

在div.parent里面像子标签<a>，<input>，<label>等。

代码： div.parent * {color: #045123!important;}

您也可以删除重要的，不是必需的

— 用户名
source

7

这是我最近编写的一些代码。我认为它提供了将类/ 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>

展开摘要

— 标记
source

CSS不允许使用单行注释，例如//。见stackoverflow.com/questions/4656546/...

— 沃尔克E.

4

div.test td, div.test caption, div.test th

为我工作。

子选择器>在IE6中不起作用。

— Traingamer
source

2

据我所知：

div[class=yourclass] table {  your style here; }

或者就您而言：

div.yourclass table { your style here; }

（但这将对yourclass可能不是的元素起作用div）将仅影响inside的表yourclass。而且，正如Ken所言，>并非在所有地方都受支持（div[class=yourclass]所以也要在类中使用点符号）。

— 通努兹
source

0

这段代码也可以使用SCSS语法来解决问题

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
source