我有一个无序列表元素包含这样的元素列表。
<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在这里
最佳答案
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>
关于javascript - 使用 css 显示和隐藏元素不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36589767/