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

而在使用display: inline;.it 时,css 没有显示或隐藏特定元素.所以这是我的CSS.

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

小提琴就在这里

Answer 1

在display: none因为早期选择没有影响div.menu li是更具体的,所以它的优先级.将选择器更改为类似的div.menu li.menu-y.

选择div.menu li具有012具有特异性,因为它具有1类选择和2个元件的类型选择作为其一部分而li.menu-y与li.menu-z选择器具有仅011具有特异性,因为它只有1类选择和1个元件类型选择作为其一部分.

将选择器更改为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>