I have simple question regarding CSS parent and child.
我有一个关于css父母和孩子的简单问题。
Now I need the sub menu show when one of menu has class active
.
现在,我需要显示的子菜单时,其中一个菜单有类活动。
I know we just can add display: block
together with sub-menu
. But I need when one of menu has class active the ul
will be set to display: block
.
我知道我们只需要将Display:Block和子菜单添加在一起。但我需要当其中一个菜单有类活动的用户界面将被设置为显示:块。
Is it possible?
有可能吗?
.sub-menu {
display: none;
}
.sub-menu .active {
color: blue;
}
<ul class="menu">
<li>Menu 1</li>
<ul class="sub-menu">
<li>A</li>
<li class="active">B</li>
<li>C</li>
</ul>
</ul>
<ul class="menu">
<li>Menu 2</li>
<ul class="sub-menu">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</ul>
更多回答
Try the CSS :has() pseudo class
尝试使用css:has()伪类
Your HTML is invalid. A <ul>
can not be the child of a <ul>
.
您的HTML无效。
优秀答案推荐
What exactly are we trying to hide? The .menu with or without the .active elem or the submenu with or without the .active?
我们到底想隐瞒什么?带或不带.active元素的菜单或子菜单带或不带.active?
If you are looking to have one active sub-menu then using the :has() pseudo-selector should do it.
如果您希望有一个活动子菜单,那么使用:has()伪选择器应该可以做到这一点。
.menu {
list-style: none;
}
.sub-menu {
display: none;
}
.sub-menu:has(.active) {
display: block;
}
.sub-menu .active {
color: blue;
}
<ul class="menu">
<li>Menu 1</li>
<li>
<ul class="sub-menu">
<li>A</li>
<li class="active">B</li>
<li>C</li>
</ul>
</li>
</ul>
<ul class="menu">
<li>Menu 2</li>
<li>
<ul class="sub-menu">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</li>
</ul>
更多回答
Your HTML is invalid. Please delete this and fix the HTML. A <ul>
cannot be the child of a <ul>
您的HTML无效。请删除此内容并修复该HTML。
我是一名优秀的程序员,十分优秀!