Có cách nào để ẩn mục thứ n trong danh sách bằng CSS không?

Question

Ví dụ:

<ul class="mybuttons"> 
    <li class="mybutton"></li> 
    <li class="mybutton"></li> 
    <li class="mybutton"></li> 
</ul> 

Có thể ẩn mục thứ 2 bằng css không?

Answer 1

nth-child thực sự là cách CSS.

Trong CSS tinh khiết, cú pháp đơn giản là

li.mybutton:nth-child(2){ 
    display:none; 
} 

nth-of-type(2) công trình trong trường hợp này quá.

Chỉnh sửa: Mặc dù đây là câu trả lời CSS, như đã lưu ý, đây là CSS3 và được triển khai only in some browsers. IE và FF3 trở xuống không hỗ trợ điều này. Được triển khai trong FF3.5, Konqueror và không chính xác trong Chrome, Safari và Opera. nth-of-type() triển khai tốt hơn.

Hỗ trợ trong các trình duyệt cũ hơn sẽ yêu cầu javascript (được đơn giản hóa với jQuery, et al). Bộ chọn jQuery được mô tả trong tài liệu Selectors/nthChild và các tài liệu trên có thể được thực hiện với $("li.mybutton:nth-child(2)").hide().

Answer 2

n-th child pseudo selectors thực hiện việc này nhưng chúng chưa được hỗ trợ rộng rãi và sẽ không diễn ra trong một thời gian. Bạn sẽ cần Javascript/jQuery hoặc viết ra một lớp đặc biệt cho các mục bạn muốn ẩn hoặc chỉ ẩn các mục một cách trực tiếp.

Đây là cách bạn muốn làm điều đó với jQuery:

$("ul.mybuttons li:nth-child(2)").hide(); 

Answer 3

ul.mybuttons li:first-child { 
    display:none; 
} 

Answer 4

đầu tiên tôi sẽ thiết lập li thứ hai như class = "hidden_li" trong file HTML.

Ví dụ:

<ul class="mybuttons"> 
<li class="mybutton"></li> 
<li class="mybutton" class="hidden_li"></li> 
<li class="mybutton"></li> 
</ul> 

Sau đó, tôi sẽ phong cách nó như thế này:

.hidden_li{ 
    visibility : hidden; 
    height : 0px; 
    width : 0px; 
    margin : 0px; 
    padding : 0px; 
    overflow : hidden; 
}