Question

我想在无序列表中选择前两个列表项。我可以选择第一项：

ul li:nth-child(1) a {
    background: none repeat scroll 0 0 beige;
}

OR

ul li:first-child a {
    background: none repeat scroll 0 0 beige;
}

我想同时选择第一行和第二行 - 我该怎么做？

Answer 1

不使用js或:nth-child（我相信在IE中不支持）

ul li:first-child, ul li:first-child + li {
    list-style: none;
}

Here是在IE7中测试的演示

Answer 2

为了选择第一个和第二个孩子，您可以使用单个:nth-child()伪类，如下所示：

ul li:nth-child(-n+2) a {
    background: none repeat scroll 0 0 beige;
}

Answer 3

这适用于IE9 +，但它并不是最短的。 @ BoltClock的选择器是IE9 +的最短解决方案。我认为这个更容易理解，所以我会把它留作另类。

ul li:first-child a, ul li:nth-child(2) a
{
   background: none repeat scroll 0 0 biege;
}

Answer 4

跨浏览器兼容性的最佳选择是使用jQuery并为列表项分配一个类。

像...一样的东西。

$( function() {

 $('li').each( function() {
   if( $(this).index() == 1 || $(this).index() == 2 ) {
     $(this).addClass('first_or_second');
   }
 });

});

Answer 5

.trJobStatus ul{
    width: 500px;
  height:500px;
    float: left;
  }
.trJobStatus ul li{
   width: 50px;
  height:50px;
  border: solid 1px #ddd;
  list-style:none;
  display: inline-block;
  text-align: center;
  line-height:50px;
  font-size:25px;
  }

.trJobStatus ul li:nth-child(1),
.trJobStatus ul li:nth-child(5){
  color:red;
  }

 
  <div class="trJobStatus">
  <ul>
<li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

.trJobStatus ul li：nth-child（1）， .trJobStatus ul li：nth-child（2）{ 颜色：#fff; 背景色：#ddd; }

nth-child（）或小孩？如何在一个中选择第一个和第二个孩子

5 个答案: