将CSS样式应用于子元素

css CSS

卡卡西Near

2020-04-07

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

我究竟做错了什么？

第4064篇《将CSS样式应用于子元素》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
西里阿飞 2020.04.07

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

你要 

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>

宝儿 2020.04.07

除了所有元素和所有元素之外，此代码“ 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;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android