Agg*_*nos 3 html css css-selectors
所以我们想要在列表中访问-n + 3个 li元素(如果在li我们想要访问的元素之前有不同类型的元素是我们不关心的细节),我使用以下方式:
<html>
<body>
<style>
li:nth-child(-n+3) {
background: #ff0000;
}
</style>
<p>An unordered list:</p>
<ul>
<h1>heading</h1>
<li>coffee</li>
<li>tea</li>
<li>water</li>
<li>coca-cola</li>
<li>sprite</li>
<li>orange juice</li>
<li>beer</li>
</ul>
</body>
</html>
它工作正常,但在Explorer 8及更早版本中,nth-child()不支持选择器.那么如何在不使用伪类的情况下访问-n + 3 li元素nth-child()呢？
您可以使用:first-child和相邻的兄弟选择器.他们在IE7 +上工作.
笔记:
h1标签作为任何人的直接孩子ul.但是,如果你的结构是这样的,你不能修改它,那么你可以使用:first-child + li, :first-child + li + li.:nth-child(-n+3)通常会选择父母的前3个孩子.在您的演示,因为第一个孩子是h1因为你已经还附上元素类型(li)将nth-child(-n+3)在h1没有得到选择,只有两个li是按照它被选中.我在注释1中提到的选择器也会这样做(也就是说,它会选择li跟在第一个孩子后面的前两个- 也就是h1标签 - 不管它有多少个孩子ul).演示1 :(内部没有任何其他标签ul)
li:first-child,
li:first-child + li {
color: red;
}<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>and so on..</li>
</ul>演示2 :(与您的结构)
ul :first-child + li,
ul :first-child + li + li {
color: red;
}
li:nth-child(-n+3){
background: beige;
}<p>An unordered list:</p>
<ul>
<h1>heading</h1>
<li>coffee</li>
<li>tea</li>
<li>water</li>
<li>coca-cola</li>
<li>sprite</li>
<li>orange juice</li>
<li>beer</li>
</ul>| 归档时间： |
|
| 查看次数： |
1177 次 |
| 最近记录： |