如何将CSS样式应用于子元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (8)
  • 关注 (0)
  • 查看 (171)

如何指定class样式应用到DIV中的表元素:

为什么第一行代码是有效的,而第二行却不起作用?

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>

应该如何修改呢?

提问于
用户回答修改于

对所有的类都适用一个class

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}
用户回答回答于

可以是这样的:

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

或者是这样:

div.yourclass table { your style here; }

(这将适用于yourclass不是div 标签)同时它只会影响内部的表的样式。

用户回答回答于
div.test td, div.test caption, div.test th 

这个代码是可以正常显示的,不过不支持IE6

用户回答回答于

下面是我最近编写的一些代码,希望可以帮助到你:

.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>
用户回答回答于

IE6及以下版本的>,+和[]选择器不可用。

用户回答回答于

如果想在所有的子元素中添加样式,而不指定html标记,可以使用父标记div.parent

代码如下:

div.parent * {color: #045123!important;}
用户回答回答于

选择器通常只匹配子类,不会继承

比如:

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">  */
用户回答回答于

扫码关注云+社区

领取腾讯云代金券