如何在CSS中当<li>含active类时将父级<ul>设为display:block？

首先明确：纯CSS做不到通过子元素的状态反向控制父元素样式。

CSS的选择器是单向匹配的，只能从祖先元素往后代元素找，没有反向选择父元素的语法。你现在写的.sub-menu .active是选中.sub-menu下的.active子元素，但反过来，没办法用.active去选中它的父级.sub-menu并修改样式。

给你两个可行的解决办法：

方法1：调整HTML结构，把状态类移到父级 #

把active类加到.sub-menu本身（或者它的父级容器），同时给子元素换个类名区分样式，这样就能直接用CSS控制显示：

修改后的HTML：

<ul class="menu">
  <li>Menu 1</li>
  <ul class="sub-menu active">
    <li>A</li>
    <li class="active-item">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>

对应的CSS：

.sub-menu {
  display: none;
}

.sub-menu.active {
  display: block;
}

.sub-menu .active-item {
  color: blue;
}

方法2：用JavaScript实现反向控制 #

如果不想改HTML结构，可以用JS检测带active类的子元素，然后找到它的父级.sub-menu并设置显示：

// 找到所有带active类的子项
const activeItems = document.querySelectorAll('.sub-menu .active');
activeItems.forEach(item => {
  // 向上查找最近的.sub-menu父元素
  const parentSubMenu = item.closest('.sub-menu');
  if (parentSubMenu) {
    parentSubMenu.style.display = 'block';
  }
});

如果是用Vue、React这类框架，也可以通过数据绑定的方式，把子元素的状态和父元素的显示状态关联起来，逻辑和JS原生类似，只是用框架的语法实现。

内容的提问来源于stack exchange，提问作者HiDayurie Dave