css - 如何使用 CSS 将样式添加到前 2 个列表元素

Question

我有以下格式的列表，如何使用 CSS 为前 2 个列表元素添加样式（应该在 IE8 中工作）：

<ul id="list1"  style="margin-left:-20%;font-weight:bold" >
   <li class="xyz"> Element1 </li>
   <li class="xyz"> Element2 </li>
   <li class="xyz"> Element3 </li>
</ul>

Answer 1

您可以使用 nth-child 伪类，但它不适用于 IE8 及更早版本。相反，我会为每个元素设置样式，就像您想要设置前两个样式一样

ul li {
color: red;
}

然后以不同的方式设计最后一个，如下所示：

ul li + li + li {
color: blue;
}

这也适用于较旧的 IE。

Answer 2

在您的 CSS 中尝试此代码

    ul li:first-child {
        //style
    }
    /* equivalent to li:nth-child(2) */
    ul li:first-child + li {
        //style
    }

这是 jsfiddle 中带有另一个代码的示例，但在 IE8 中使用 downvote 在这种情况下是不合适的：

JSFIDDLE

Answer 3

试试这个方法

 #list1 li:first-child
{

//styles//
}
#list1 li:first-child+li
{
  //styles//

}

Answer 4

对于这个问题，您在 head 标记中使用此代码，然后将 1 类设置为元素 2

<!--[if IE 8]>
  <style>
     .Element2{
        Your Style
     }
  </style>
<![endif]-->

此代码仅适用于 IE8

Answer 5

您可以使用以下选择器轻松添加它，它也适用于 IE8

#list1 li:first-child, #list1 li:nth-child(2){ border:1px solid red; }

Answer 6

$("li:lt(2)").css("color", "red");

使用 JQuery 选择器:lt()（小于）将针对前 2 li。

在这里阅读 - http://api.jquery.com/lt-selector/