如何仅用CSS实现下拉框的显示隐藏互斥逻辑？

CSS本身没有原生的“条件判断元素display属性”的能力，因为它是声明式样式语言，无法直接检测元素的计算样式并执行逻辑。但可以通过关联触发dropdown1显示的交互状态，间接实现你要的需求——毕竟dropdown1的display:block肯定是由某个用户操作（比如hover、点击）或状态变化触发的，我们可以把这个触发条件作为控制dropdown2的依据。

下面是两种常见场景的实现方案：

1. 鼠标悬停触发dropdown1显示 #

如果dropdown1是通过鼠标悬停父元素/触发元素来显示的，可以用兄弟选择器关联状态：

HTML结构 #

<div class="dropdown-container">
  <span class="dropdown1-trigger">Hover me for Dropdown 1</span>
  <div class="dropdown1">Dropdown 1 Content</div>
  <div class="dropdown2">Dropdown 2 Content</div>
</div>

CSS代码 #

/* 默认状态：dropdown1隐藏，dropdown2显示 */
.dropdown1 {
  display: none;
}
.dropdown2 {
  display: block;
}

/* 悬停触发dropdown1显示，同时隐藏dropdown2 */
.dropdown1-trigger:hover + .dropdown1 {
  display: block;
}
/* 用通用兄弟选择器~选中dropdown1之后的dropdown2 */
.dropdown1-trigger:hover + .dropdown1 ~ .dropdown2 {
  display: none;
}

2. 点击触发dropdown1显示（用checkbox模拟） #

如果dropdown1是点击触发的，可以用隐藏的checkbox的:checked伪类来同步控制两个下拉框：

HTML结构 #

<div class="dropdown-container">
  <input type="checkbox" id="toggle-dropdown1" hidden>
  <label for="toggle-dropdown1">Click me to toggle Dropdown 1</label>
  <div class="dropdown1">Dropdown 1 Content</div>
  <div class="dropdown2">Dropdown 2 Content</div>
</div>

CSS代码 #

/* 默认状态：dropdown1隐藏，dropdown2显示 */
.dropdown1 {
  display: none;
}
.dropdown2 {
  display: block;
}

/* 当checkbox被选中时，显示dropdown1并隐藏dropdown2 */
#toggle-dropdown1:checked ~ .dropdown1 {
  display: block;
}
#toggle-dropdown1:checked ~ .dropdown2 {
  display: none;
}

关键说明 #

• 核心思路是不直接检测dropdown1的display属性，而是利用触发dropdown1显示的同一个交互状态（hover/checked）来控制dropdown2，因为这两个状态是强关联的。
• 这种方案的前提是两个下拉框在DOM结构上是兄弟元素（或存在可被选择器关联的层级关系），否则无法通过纯CSS实现。

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