首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >对子元素应用CSS样式

对子元素应用CSS样式
EN

Stack Overflow用户
提问于 2009-03-10 20:19:35
回答 7查看 665K关注 0票数 270

我只想将样式应用于具有特定类的DIV中的表:

注意:我更喜欢对子元素使用css选择器。

为什么#1行得通,而#2不行?

1:

代码语言:javascript
复制
div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

代码语言:javascript
复制
div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

代码语言:javascript
复制
<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>

我做错了什么?

EN

回答 7

Stack Overflow用户

发布于 2012-05-25 03:23:46

代码语言:javascript
复制
.test * {padding: 40px 100px 40px 50px;}
票数 138
EN

Stack Overflow用户

发布于 2009-03-10 20:22:54

> selector仅匹配直接子项,而不匹配子项。

你想要的

代码语言:javascript
复制
div.test th, td, caption {}

或者更有可能

代码语言:javascript
复制
div.test th, div.test td, div.test caption {}

编辑:

第一个说的是

代码语言:javascript
复制
  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

而第二个则是

代码语言:javascript
复制
  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 > th显示为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>

票数 92
EN

Stack Overflow用户

发布于 2013-05-02 14:55:15

如果你想在所有子标签中添加样式,且没有html标签的规范,那么可以使用它。

父标签div.parent

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

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

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

票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/632100

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档