将CSS样式应用于子元素

卡卡西Near2020-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>

我究竟做错了什么？

西里阿飞2020/04/07 11:19:55

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

你要

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 11:19:55

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer