对子元素应用CSS样式

我想只对具有特定类的DIV内部的表应用样式:

注意:我宁愿为子元素使用css选择器。

为什么第一条可行，第二条不行?

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

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>

我做错了什么?

当前回答

据我所知:

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

或者在你的情况下甚至是这样:

div.yourclass table { your style here; }

(但这将适用于类中的元素，可能不是div)将只影响类中的表。而且，正如Ken所说，>并不是在所有地方都受支持(而且div[class=yourclass]也受支持，所以对类使用点符号)。

2009-03-10 20:22:08

其他回答

这段代码"div.test th, td，标题{padding:40px 100px 40px 50px;}"除了所有td元素和所有标题元素外，还对类名为test的div元素中包含的所有th元素应用了一个规则。

它与“所有td, th和标题元素都包含在一个div元素中，具有test类”不同。要做到这一点，你需要改变你的选择器:

'>'不完全支持一些旧的浏览器(我指的是你，Internet Explorer)。

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

2009-03-10 20:21:27

使用SCSS语法，这段代码也可以做到这一点

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

2020-05-06 04:54:53

据我所知:

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

或者在你的情况下甚至是这样:

div.yourclass table { your style here; }

2009-03-10 20:22:08

如果你想添加样式在所有的孩子和没有规范的html标签，然后使用它。

父标签div.parent

div.parent中的子标签，如<a>， <input>， <label>等。

Code: div.parent * {color: #045123!important;}

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

2013-05-02 06:55:15

>选择器只匹配直接子代，不匹配子代。

你想要的

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

2009-03-10 20:22:54

对子元素应用CSS样式

推荐文章

最新文章

标签