jquery - 消除 CSS 应用于子列表项

标签 jquery html css

<分区>

我有以下 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;
}

More on :not() from MDN

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/

上一篇:php - Firefox 中的 CSS 问题

下一篇:jquery - 将 CSS 页脚固定为 float /Jquery

相关文章:

php - 使用 php 激活和停用 mysql 记录

javascript - 基于第一个下拉菜单的第二个下拉选项

html - 侧边栏低于内容和页脚不是 100%

html - 屏幕阅读器不读取自定义下拉菜单的选项

html - 动画结束后短暂的卡顿

javascript - 使用带有 ajax 搜索的选择下拉菜单进行更改的 jQuery

javascript - jquery 延迟加载和其他 Jquery/javascript 函数在附加后不起作用

javascript - 在 Javascript 中调用后延迟函数

css - 2 个伪选择器在 CSS 中分别不起作用 #id :after:active{}

html - 如何水平居中元素?