html - 如何仅对一级菜单应用样式
问题描述
这里我有菜单结构,我想做的是,当我单击父级项或任何子菜单项时,该类active
将被添加到单击的菜单中。
我只想更改父菜单项而不是子菜单项的颜色,我该怎么做。现在发生的事情是我已经应用了 css,但它被应用到父菜单以及子菜单项。
.center-in-menu {
&:not(div.we-mega-menu-submenu) {
.we-mega-menu-li.active {
a {
color: blue !important;
}
}
}
}
<ul class="nav-tabs center-in-menu">
<li class="we-mega-menu-li dropdown-menu">
<a href="#">Menu 1</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li dropdown-menu"><a href="#">submenu2</a></li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
</ul>
</div>
<li class="we-mega-menu-li"><a href="#">submenu3</a></li>
<li class="we-mega-menu-li"><a href="#">submenu4</a></li>
<li class="we-mega-menu-li"><a href="#">submenu5</a></li>
</ul>
</div>
<li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
<li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
<li class="we-mega-menu-li dropdown-menu">
<a href="3">Menu 4</a>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li active dropdown-menu"><a href="#">submenu2</a></li>
<div class="we-mega-menu-submenu">
<ul class="nav-tabs">
<li class="we-mega-menu-li active"><a href="#">submenu1</a></li>
<li class="we-mega-menu-li"><a href="#">submenu2</a></li>
<li class="we-mega-menu-li"><a href="#">submenu3</a></li>
<li class="we-mega-menu-li"><a href="#">submenu4</a></li>
<li class="we-mega-menu-li"><a href="#">submenu5</a></li>
</ul>
</div>
<li class="we-mega-menu-li"><a href="#">submenu3</a></li>
<li class="we-mega-menu-li"><a href="#">submenu4</a></li>
<li class="we-mega-menu-li"><a href="#">submenu5</a></li>
</ul>
</div>
</li>
<li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
</ul>
解决方案
用于>
仅将样式应用于给定选择器内的元素,而无需进一步深入。
这是一个例子:
div.wrapper > a { /* only applied to direct children */
font-weight: bold;
}
div.inner a {
font-style: italic;
}
<div class="wrapper">
<a>1st Level (Bold)</a>
<div class="inner">
<a>2nd Level (Italic)</a>
</div>
<div class="noclass">
<a>2nd Level (No style)</a>
</div>
</div>
推荐阅读
- python - Python:正则表达式查找文件中的所有函数调用,但不查找函数定义
- java - 在 RecyclerView 的单个界面中使用多个 onClick 方法
- django - 值集的 django 模型字段
- go - 可以在生产中使用 golang pprof 而不影响性能吗?
- performance - 如何通过添加单元子句来逐步解决一系列 CP-SAT 问题来实现加速?
- linux - 条件动态链接
- javascript - 如何通过在 Laravel 中传递参数来使用 ajax 重新加载数据表?
- laravel - Laravel 不时冻结
- python - 如何在第一个 epoch 直接使用 map 函数生成的转换,而不是每个 epoch 都执行 map 函数?
- android-studio - 如何从 adb logcat 获取日志,就像在 Android Studio 的运行选项卡中一样?