对子元素应用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>

我做错了什么?

当前回答

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

2012-05-24 19:23:46

其他回答

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

父标签div.parent

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

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

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

2013-05-02 06:55:15

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

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

2020-05-06 04:54:53

这段代码"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

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

2012-05-24 19:23:46

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

对我有用。

子选择器>在IE6中无法工作。

2009-03-10 20:32:18

对子元素应用CSS样式

推荐文章

最新文章

标签