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个元素类型）但我规定了另一个，因为我觉得它与你早期的选择器更加一致。

＆＃13;

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

＆＃13;

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

＆＃13;

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

使用css显示和隐藏元素不起作用

3 个答案: