rom*_*n m 216 css css-selectors
我想仅使用特定类将样式应用于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>
我究竟做错了什么？
Ken*_*ing 295
除了所有元素和所有元素之外,此代码" div.test th, td, caption {padding:40px 100px 40px 50px;}" 还将规则应用于具有已命名类th的div元素所包含的所有元素.test td caption
它与"all td,th以及具有类的caption元素所包含的div元素test"不同.为此,您需要更改选择器:
>一些旧的浏览器(我正在看着你,Internet Explorer)并不完全支持' '.
div.test th,
div.test td,
div.test caption {
padding: 40px 100px 40px 50px;
}
Ric*_*rds 110
.test * {padding: 40px 100px 40px 50px;}
Gre*_*reg 76
在> 选择匹配直接孩子而已,没有后代.
你要
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>
小智 10
如果你想在所有孩子中添加样式而没有html标签的规范,那么就使用它.
父标签 div.parent
在div.parent里面像子标签<a>,<input>,<label>等.
代码: div.parent * {color: #045123!important;}
你也可以删除重要的,它不是必需的
小智 10
使用 SCSS 语法，此代码也可以实现这一目的
.parent {
& > * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
div.test td, div.test caption, div.test th
为我工作。
子选择器 > 在 IE6 中不起作用。
小智 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>| 归档时间： |
|
| 查看次数： |
509118 次 |
| 最近记录： |