Zeigen und verbergen Element mit CSS funktioniert nicht

Question

Ich habe eine ungeordnete Liste Element enthält Liste von Elementen wie folgt.

<div class="menu"> 
<ul> 
<li class="menu-x">x1</li><li class="menu-x">x2</li><li class="menu-x">x3</li> 
<li class="menu-y">y1</li><li class="menu-y">y2</li><li class="menu-y">y3</li> 
<li class="menu-z">z1</li><li class="menu-z">z2</li><li class="menu-z">z3</li> 
</ul> 
</div> 

Und in der CSS, wenn display: inline; .it mit nicht angezeigt wird oder die besondere element.So versteckt dies mein css ist.

div.menu li{ 
    display: inline; 
    border-radius:2px; 
    font-size:12px; 
    margin:5px; 
    box-shadow:0 0px 5px #FFFFFF; 
    padding:7px 7px 0px 7px; 
} 
li.menu-y{ 
    display:none; 
} 
li.menu-z{ 
    display:none; 
} 

fiddle ist hier

Answer 1

Die display: none hat keine Auswirkung, da der frühere Selektor div.menu li spezifischer ist und so hat es Vorrang. Ändern Sie den Selektor zu etwas wie div.menu li.menu-y.

Der Selektor div.menu li hat eine Spezifität von 012, weil es 1 Klassenselektor und 2 Elementart Selektoren als Teil davon hat, während das li.menu-y und li.menu-z Selektoren eine Spezifität von nur 011 hat, da es nur 1 Klassenselektor und 1 Elementart hat Selektor als Teil davon.

Ändern der Wähler auf div.menu li.menu-y würde bedeuten, dass die Spezifität 022. wird also es wird Vorrang vor div.menu li zu nehmen und so die display: none wirksam werden.

Oder sogar .menu li-menu-y würde ausreichen, weil seine Spezifität 021 (2 Klassen und 1 Elementtyp) ist, aber ich verschrieb das andere, weil ich fühlte, dass es mit Ihrem früheren Selektor konsistenter war.

div.menu li { 
 
    display: inline; 
 
    border-radius: 2px; 
 
    font-size: 12px; 
 
    margin: 5px; 
 
    box-shadow: 0 0px 5px #FFFFFF; 
 
    padding: 7px 7px 0px 7px; 
 
} 
 
div.menu li.menu-y { 
 
    display: none; 
 
} 
 
div.menu li.menu-z { 
 
    display: none; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li class="menu-x">x1</li> 
 
    <li class="menu-x">x2</li> 
 
    <li class="menu-x">x3</li> 
 
    <li class="menu-y">y1</li> 
 
    <li class="menu-y">y2</li> 
 
    <li class="menu-y">y3</li> 
 
    <li class="menu-z">z1</li> 
 
    <li class="menu-z">z2</li> 
 
    <li class="menu-z">z3</li> 
 
    </ul> 
 
</div>

Answer 2

versuchen diese:

div.menu li{ 
    display: inline; 
    border-radius:2px; 
    font-size:12px; 
    margin:5px; 
    box-shadow:0 0px 5px #FFFFFF; 
    padding:7px 7px 0px 7px; 
} 
.menu .menu-y{ 
    display:none; 
} 
.menu .menu-z{ 
    display:none; 
} 

DEMO HERE

Answer 3

wie Try this:

ul li .menu-y { 
    display:none; 
} 

ul li .menu-z { 
    display:none; 
}