CSS如何通过:hover或:active控制非嵌套的其他div显示

问题解答 #

你的需求完全可以实现，且要弹出的div不需要嵌套在导航栏div内部。
首先澄清：你提到的:active是CSS伪类，仅在元素被鼠标按下且未松开的状态下生效，松开后状态就消失。如果你需要点击后一直保持二级导航显示，不推荐用:active，可以选择下面两种方案实现：

实现方案 #

一、纯CSS实现（无需JS） #

场景1：点击导航项后保持二级导航显示（推荐，无需调整DOM结构）

用:target伪类实现，不需要修改现有嵌套关系，只要修改两处属性即可：

1. 把顶部Nav1的a标签href属性改为#subNav
2. 给二级导航的nav标签<nav class="container2">添加id属性id="subNav"
   然后添加CSS代码：

/* 默认隐藏二级导航 */
.container2 {
  display: none;
}
/* 点击Nav1后，对应id的元素匹配:target伪类，显示二级导航 */
.container2:target {
  display: block;
}

场景2：仅按住导航项时显示二级导航（用:active）

因为CSS暂不支持父选择器，你当前的DOM结构中导航和wrapper是同级元素，无法直接通过子元素的:active状态选中外层wrapper下的二级导航。如果一定要用:active实现，可以把wrapper放到nav内部作为最后一个子元素，再用兄弟选择器触发：

/* 默认隐藏二级导航 */
.container2 {
  display: none;
}
/* 按住Nav1时显示二级导航 */
.container .1 a:active ~ .wrapper .container2 {
  display: block;
}

二、JS实现（最灵活，无结构限制） #

不管你的DOM结构怎么放，只要能选中对应元素就能实现，支持点击切换显示/隐藏，不需要修改现有嵌套关系：

1. 先加基础CSS：

.container2 {
  display: none;
}
.container2.show {
  display: block;
}

2. 添加JS代码：

// 选中导航项和二级导航元素
const nav1 = document.querySelector('.navLinks1');
const subNav = document.querySelector('.container2');

// 绑定点击事件
nav1.addEventListener('click', function(e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  // 切换显示类
  subNav.classList.toggle('show');
});

注意事项 #

你当前代码里的导航项类名使用了纯数字（.1、.2等），不符合CSS命名规范，部分浏览器可能无法正确识别对应选择器，建议修改为字母开头的类名，比如nav-item-1、nav-item-2。

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