Question

因此，我们希望访问列表中的 -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()选择器不受支持。那么我们如何在不使用伪类li的情况下访问 -n + 3 nth-child()元素？

Answer 1

您可以使用:first-child和adjacent sibling selector。它们适用于IE7 +。

注意：

你shouldn't be using h1 tag as a direct child of any ul。但是，如果您的结构如何，并且您无法对其进行修改，那么您可以使用:first-child + li, :first-child + li + li。
:nth-child(-n+3)通常会选择父母的前3个孩子。在您的演示中，由于第一个孩子是h1，因为您还将元素类型（li）附加到nth-child(-n+3) h1并且＃39} ; t被选中，只选择了跟随它的两个li。我在注释1中提到的选择器也会这样做（也就是说，它会选择跟随第一个孩子的前两个li - 即h1标签 - 无论是ul有多少个孩子。

演示1：（ul内没有任何其他标记）

＆＃13;

li:first-child,
li:first-child + li {
  color: red;
}

＆＃13;

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>and so on..</li>
</ul>

＆＃13;

演示2：（与您的结构一起）

＆＃13;

ul :first-child + li,
ul :first-child + li + li {
  color: red;
}

li:nth-child(-n+3){
  background: beige;
}

＆＃13;

<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>

＆＃13;

CSS中的Nth-child（）选择器替代解决方案

1 个答案: