CSS ul li: Tránh đường viền đôi

Question

Tôi có một UL với

border: 1px solid grey; 

nó chứa nhiều Lis với

border-bottom: 1px dotted grey; 

để giữ những vật ngoài thị. Nhưng bây giờ LI cuối cùng có đường viền chấm và đường viền chắc chắn UL! Điều này có vẻ khó chịu. Làm thế nào tôi có thể tránh điều đó? Có cách nào để đặt biên giới giữa LI thay vì sau họ?

Answer 1

selectors CSS3 thể nhắm mục tiêu :first-child hoặc :last-child, như thế này:

ul { 
    border: 1px solid grey; 
} 
li { 
    border-bottom: 1px dotted grey; 
} 
li:last-child { 
    border:none; 
} 

Một ví dụ làm việc: http://api.fatherstorm.com/test/4165384.php

Answer 2

Sử dụng một lớp hoặc CSS3 selector :last-child để loại bỏ các ngoái <li> border-bottom

ul li:last-child { border-bottom:0; } 

hoặc

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li class="last">3</li> 
</ul> 

ul li.last { border-bottom:0; } 

Answer 3

Chỉ cần thêm một lớp khác nhau để cuối cùng li đó quy định cụ thể để không hiển thị một biên giới.

Answer 4

Một giải pháp thông suốt là sử dụng plus (+) selector để tạo kiểu danh sách:

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

Bạn chỉ cần thêm the following css:

li + li { 
    border-top: 1px dotted grey; 
} 

Bạn tránh thêm bộ chọn bổ sung và có thể giữ mã sạch hơn. Mặc dù tùy thuộc vào nhu cầu của bạn, bạn có thể muốn kiểm tra browser compatibilty trước tiên.