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

我做错了什么?

当前回答

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

2012-11-26 15:32:59

其他回答

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

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

父标签div.parent

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

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

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

2013-05-02 06:55:15

据我所知:

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 td, div.test caption, div.test th

对我有用。

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

2009-03-10 20:32:18

对子元素应用CSS样式

推荐文章

最新文章

标签