javascript - 使用 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; 时在 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;
}

fiddle在这里

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>