将CSS样式应用于子元素

StackOverflow https://stackoverflow.com/questions/632100

  •  08-07-2019
  •  | 
  •  

题

我想仅使用特定类将样式应用于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>

我做错了什么？

有帮助吗？

解决方案

此代码<！>“; div.test th, td, caption {padding:40px 100px 40px 50px;} <！>”;除了所有 th元素和所有之外，将规则应用于div元素所包含的所有test元素，其中包含名为td的类caption元素。

与<！>所有>，<=>和<=>元素不同，<=>元素包含<=> <！>“的类。为此，您需要更改选择器：

某些旧版浏览器并不完全支持

'<=>'（我在看你，Internet Explorer）。 

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

其他提示

.test * {padding: 40px 100px 40px 50px;}

＆gt; 选择器只匹配直接的孩子，而不是后代。

你想要

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＆gt; 说 any＆lt; th＆gt;这是＆lt; div class =＆quot; test＆quot;＆gt; 的**直接**子，这意味着它将匹配＆lt; div class =＆quot; test＆quot;＆gt;＆lt; th＆gt; this＆lt ; / th＆gt;＆lt; / div＆gt; 但不匹配＆lt; div class =＆quot; test＆quot;＆gt;＆lt; table＆gt;＆lt; th＆gt; this＆lt; / th＆gt;＆lt; / table＆gt; ＆LT; / DIV＆GT;

如果你想在所有孩子中添加样式而没有html标签的规范，那么就使用它。

父标记 div.parent

div.parent中的子标记，如＆lt; a＆gt; ，＆lt; input＆gt; ，＆lt; label＆gt; 等。

代码： div.parent * {color：＃045123！important;}

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

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

div.test td, div.test caption, div.test th

适合我。

子选择器＆gt;在IE6中不起作用。

据我所知：

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

或者在你的情况下甚至是这样：

div.yourclass table { your style here; }

（但这适用于 yourclass 可能不是 div 的元素）只会影响 yourclass 中的表。而且，正如肯所说，＆gt;在任何地方都不受支持（并且 div [class = yourclass] 也是如此，所以对类使用点表示法。）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top