使用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示例代码。

- htoniv

---

你可以使用float:left代替display:inline。 - Zubair sadiq

Answer 1

因为先前的选择器 div.menu li 更加具体，所以 display: none 没有效果。将选择器更改为类似于 div.menu li.menu-y 的内容。

选择器 div.menu li 的优先级为 012，因为它包含了 1 个类选择器和 2 个元素类型选择器；而 li.menu-y 和 li.menu-z 的选择器只包含了 1 个类选择器和 1 个元素类型选择器，所以它们的优先级仅为 011。

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

- Harry

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

这里演示

- Ivin Raj

---

很好，你有一个解决方案，但你应该有一个有效的理由！ - Rayon

Answer 3

可以试试这样：

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

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

- Kartikeya Sharma