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/

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

6 个答案: