nth-child() hoặc con đầu lòng? làm thế nào để chọn con đầu tiên và thứ hai trong một

Question

Tôi muốn chọn hai mục danh sách đầu tiên trong một danh sách không có thứ tự. Tôi có thể chọn mục đầu tiên như sau:

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

HOẶC

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

tôi muốn chọn cả hai chi tiết đơn hàng đầu tiên và thứ hai - làm thế nào để làm điều đó?

Answer 1

Nếu không có việc sử dụng js hoặc :nth-child (mà tôi tin là không được hỗ trợ trong IE)

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

Here là một bản demo thử nghiệm trong IE7

Answer 2

Tính năng này hoạt động trong IE9 + nhưng không phải là ngắn nhất. Bộ chọn @ BoltClock là giải pháp ngắn nhất cho IE9 +. Tôi nghĩ rằng điều này là dễ hiểu hơn một chút vì vậy tôi sẽ để nó như một sự thay thế.

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

Answer 3

Cách tốt nhất để tương thích trình duyệt chéo của bạn là sử dụng jQuery và chỉ định một lớp cho mục danh sách.

• http://api.jquery.com/eq-selector/
• http://api.jquery.com/index/

Cái gì đó như ...

$(function() { 

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

}); 

Answer 4

Đối với việc lựa chọn những đứa trẻ đầu tiên và thứ hai, bạn có thể sử dụng một đơn :nth-child() pseudo-class như vậy:

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

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) { màu: #fff; màu nền: #ddd; }