我想仅使用特定类将样式应用于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>
我做错了什么?
答案 0 :(得分:284)
除了之外,此代码“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;
}
答案 1 :(得分:105)
.test * {padding: 40px 100px 40px 50px;}
答案 2 :(得分:75)
>
selector仅匹配直接子女,而不是后代。
你想要
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 > 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>
答案 3 :(得分:10)
如果你想在所有孩子中添加样式而没有html标签的规范,那么就使用它。
父标记div.parent
div.parent中的子标记,如<a>
,<input>
,<label>
等。
代码:div.parent * {color: #045123!important;}
你也可以删除重要的,不是必需的
答案 4 :(得分:5)
这是我最近写的一些代码。我认为它提供了将类/ 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>
答案 5 :(得分:4)
div.test td, div.test caption, div.test th
适合我。
子选择器&gt;在IE6中不起作用。
答案 6 :(得分:2)
据我所知:
div[class=yourclass] table { your style here; }
或者在你的情况下甚至是这样:
div.yourclass table { your style here; }
(但这适用于yourclass
可能不是div
s)的元素只会影响yourclass
内的表格。而且,正如肯所说,&gt;在任何地方都不受支持(并且div[class=yourclass]
也是如此,所以对类使用点符号。)
答案 7 :(得分:0)
使用SCSS语法,这段代码也可以解决问题
.parent {
& > * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}