Di biên giới hàng đầu của đứa con đầu lòng và biên giới phía dưới của con cuối cùng trong CSS

Question

Tôi có HTML sau:

<ul> 
<li>FIRST</li> 
<li>SECOND</li> 
<li>THIRD</li> 
<li>FOURTH</li> 
<ul> 

Và CSS sau đây:

li 
{ 
border-top:1px solid #FFF; 
border-bottom: 1px solid #D0D0D0;  
}​ 

Làm thế nào tôi có thể loại bỏ các biên giới hàng đầu cho phần tử LI đầu tiên và đường viền dưới cùng cho phần tử LI cuối cùng?

Answer 1

li:first-child { 
    border-top: none; 
} 
li:last-child { 
    border-bottom: none; 
} 

Giống như vậy.

Answer 2

Sử dụng bộ chọn CSS :not để chỉ áp dụng kiểu khi được yêu cầu — thay vì thêm kiểu sau đó xóa chúng.

Ví dụ,

body { 
 
    background: #acc; 
 
} 
 

 
li:not(:first-child) { 
 
    border-top: 1px solid #fff; 
 
} 
 

 
li:not(:last-child) { 
 
    border-bottom: 1px solid #000; 
 
}

<ul> 
 
    <li>First</li> 
 
    <li>Second</li> 
 
    <li>Third</li> 
 
    <li>Fourth</li> 
 
</ul>