<分区>
<分区>
我有以下 HTML 结构构建我的菜单:
<div id=”navigation”>
<ul>
<li class=”level1”>Top Level Menu item
<div class=”sublevel”>
<ul>
<li class=”level2”>Second Level Item1
<ul>
<li class=”level3”>Third Level Item1</li>
<li class=”level3”>Third Level Item2</li>
<li class=”level3”>Third Level Item3</li>
</ul>
</li>
<li class=”level2”>Second Level Item2
<ul>
<li class=”level3”>Third Level Item4</li>
<li class=”level3”>Third Level Item5</li>
<li class=”level3”>Third Level Item6</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
在 CSS 中,我将样式应用于 level 2
类,如下所示:
#navigation .level1 ul li {
background: #acacac;
padding-bottom: 40px !important;
border-radius: 10px;
position: absolute;
}
问题是这也适用于所有子菜单项。我如何指定仅将此应用到 level2
元素而不是 level3
?
我尝试了每个 CSS 文档的各种 >
和 +
标志,但没有成功。
最佳答案
很简单,只需要使用:not()
规则
#navigation .level1 ul li:not(.level3) {
background: #acacac;
padding-bottom: 40px !important;
border-radius: 10px;
position: absolute;
}
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.
关于jquery - 消除 CSS 应用于子列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23697631/