将CSS样式应用于子元素

Question

将CSS样式应用于子元素

csscss-selectors

309

我想只对具有特定类的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>

我做错了什么？

- rm

1

不要忘记，IE6及以下版本不支持 >、+ 和 [ ] 选择器。 - Erick

8个回答

154

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

- Richard Edwards

23

注意，* 在这里的意思是不能用任何其他更具体的规则覆盖它，因为 .test * 对于每个子元素来说都是最具体的规则。换句话说，记住无论你在 .test * 中放置什么内容，都不会被任何更具体的 CSS 规则覆盖，因为 test * 是最具体的规则。 - vadasambar

101

> 选择器只匹配直接子元素，而不是后代元素。

你想要

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表示<div class="test">的**直接**子元素中的任何<th>，这意味着它将匹配<div class="test"><th>this</th></div>，但不会匹配<div class="test"><table><th>this</th></table></div>。

- RoBorg

就此而言，因为该选择器中的td和caption是“愚蠢的”，它们将匹配任何给定的th/caption，而不考虑div.test。在CSS中，这种盲目的定位很少是你想要的，除非是用于最通用的样式。 - annakata

@annakata：那是 CSS 框架的一部分，我正在尝试将其应用到本地。 - roman m

13

如果您想在所有子标签中添加样式并没有指定html标签，则可以使用它。

父标签 div.parent

位于 div.parent 内的子标签，如 <a>、<input>、<label> 等。

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

您也可以删除 important，这不是必需的。

- user1369111

10

使用 SCSS 语法，这段代码也可以完成相同的技巧

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

- greguintow

8

这是我最近写的一些代码。我认为它提供了一个基本的解释，如何将类/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>

- Mark

1

CSS不允许使用//这样的单行注释。请参考https://dev59.com/Qm445IYBdhLWcg3w3N-z。 - Volker E.

6

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

对我来说可以正常工作。

在IE6中，子选择器 > 无法使用。

- Traingamer

4

据我所知，这个是：

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

或者在你的情况下，甚至是这个：

div.yourclass table { your style here; }

但是这将适用于具有yourclass类的元素，可能不是div。它只会影响yourclass内部的表格。正如Ken所说，>在某些情况下不被支持（div[class=yourclass]也一样），因此对于类，请使用点表示法。

- tunnuz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ken Browning · Accepted Answer

这段代码 "div.test th, td, caption {padding:40px 100px 40px 50px;}" 是针对所有包含类名为test的div元素中的th元素，以及所有td元素和所有caption元素应用规则。

它与“所有包含类名为test的div元素中的所有td、th和caption元素”的意思不同。要实现这样的效果，需要更改选择器：

在一些旧浏览器（比如IE）中，“>”并没有完全被支持。

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