所以我们要访问列表中的-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() 选择器。那么我们如何在不使用伪类nth-child()的情况下访问-n+3 li元素呢？
最佳答案
您可以使用 :first-child和 adjacent sibling selector .他们在 IE7+ 下工作。
注意事项:
- 你 shouldn't be using
h1tag as a direct child of anyul.但如果你的结构就是这样，你不能修改它，那么你可以使用:first-child + li, :first-child + li + li。 :nth-child(-n+3)通常会选择父项的前 3 个子项。在您的演示中，由于第一个 child 是h1并且您还将元素类型 (li) 附加到nth-child(-n+ 3)h1没有被选中，只有后面的两个li被选中。我在注释 1 中提到的选择器将做同样的事情(也就是说，它将选择第一个 child 之后的前两个li- 即h1标签——不管ul有多少 child )。
演示 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>关于html - CSS 中第 Nth-child() 选择器替代方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36596479/