Czy istnieje sposób na ukrywanie n-tego elementu na liście za pomocą CSS?

Question

Przykład:

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

Czy to możliwe, aby ukryć 2nd element za pomocą CSS?

Answer 1

nth-child jest rzeczywiście sposób CSS.

W czystym CSS, składnia jest po prostu

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

nth-of-type(2) prace również w tym przypadku.

Edycja: Chociaż jest to odpowiedź CSS, jak wspomniano, jest to CSS3 i zaimplementowano only in some browsers. IE i FF3 i poniżej nie obsługują tego natywnie. Zaimplementowane w FF3.5, Konquerorze i niepoprawnie w Chrome, Safari i Opera. nth-of-type() implementacje są lepsze.

Obsługa starszych przeglądarek wymaga JavaScriptu (uproszczonego z jQuery i innymi). selektor jQuery jest opisany w dokumentach Selectors/nthChild, a powyższe można uzyskać za pomocą $("li.mybutton:nth-child(2)").hide().

Answer 2

n-th child pseudo selectors zrób to, ale nie są jeszcze szeroko obsługiwane i nie będą przez jakiś czas. Będziesz potrzebować JavaScript/jQuery lub napisać specjalną klasę dla przedmiotów, które chcesz ukryć lub po prostu ukryć bezpośrednio.

Oto jak chcesz to zrobić z jQuery:

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

Answer 3

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

Answer 4

będę najpierw skonfigurować drugi li class = "hidden_li" w pliku HTML.

Przykład:

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

Wtedy będę projektować je tak:

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