CSS가있는 목록에서 n 번째 항목을 숨기는 방법이 있습니까?

Question

예 :

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

는 CSS를 사용하여 2 항목을 숨길 수 있습니까?

Answer 1

nth-child 참으로 CSS의 방법입니다. 순수 CSS에서

이 구문은 단순히 너무이 경우

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

nth-of-type(2) 작품이다.

편집 : CSS 응답이지만 CSS3이며 only in some browsers으로 구현되었습니다. IE와 FF3 이하는 기본적으로이 기능을 지원하지 않습니다. FF3.5, Konqueror에서 구현되었으며 Chrome, Safari 및 Opera에서 잘못 구현되었습니다. nth-of-type() 구현이 더 좋습니다.

구형 브라우저에서의 지원에는 javascript (jQuery 등으로 단순화)가 필요합니다. jQuery 선택기는 Selectors/nthChild 문서에 설명되어 있으며 위의 내용은 $("li.mybutton:nth-child(2)").hide()으로 수행 할 수 있습니다.

Answer 2

n-th child pseudo selectors이 작업을 수행하지만 널리 지원되지는 않으며 잠시 동안 지원되지 않습니다. Javascript/jQuery가 필요하거나 숨기려는 항목에 대한 특수 클래스를 작성하거나 항목을 직접 숨길 수 있습니다. 여기

당신이 jQuery를 함께 할 것입니다 방법은 다음과 같습니다

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

Answer 3

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

Answer 4

은 내가 먼저 를 설정합니다 클래스 = "hidden_li"HTML 파일로 두 번째 리.

예 :

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

은 그 때 나는 이런 식으로 스타일을합니다

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