cssを使って要素を表示して非表示にする

Question

私は、このような要素のリストを含む順序なしリスト要素を持っています。

<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> 

とCSSでdisplay: inline; .ITを使用して、これは私のCSSで特定のelement.Soを示すか、隠していません。

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ここで

Answer 1

display: noneで以前セレクタdiv.menu liはより特異的であり、それが優先されるので、効果はありません。セレクタをdiv.menu li.menu-yのように変更します。

それが唯一の1クラスセレクタと1つの要素タイプを有しているのでli.menu-yとli.menu-zセレクタのみ011の特異性を有する一方、それの一部として、1クラスセレクタと2つの要素タイプセレクタを有しているため、セレクタdiv.menu liが012の特異性を有しますセレクタをその一部として使用します。

セレクタをdiv.menu li.menu-yに変更すると、特異性が022になります。したがって、div.menu liより優先され、display: noneが有効になります。

.menu li-menu-yでも、その特異性は021（2クラスと1要素タイプ）ですが、前のセレクタとより一貫していると感じたので他のものを指定していれば十分です。

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

、このいずれかを試してみてください。

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

このようにしてみてください。

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

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