本文介绍如何利用现代 CSS 的 :has() 伪类，配合 :focus 实现“点击按钮显示面板、点击页面任意处自动隐藏”的纯 CSS 交互效果，无需 JavaScript。
本文介绍如何利用现代 css 的 `:has()` 伪类，配合 `:focus` 实现“点击按钮显示面板、点击页面任意处自动隐藏”的纯 css 交互效果，无需 javascript。
在传统 CSS 中，:focus 只能影响自身或后续兄弟元素（通过 + 或 ~），但无法“向上”选择父容器或跨层级控制非直接后代元素。你原代码中 .more:focus ~ .contentbox2 失效的根本原因在于：.contentbox2 并非 .more 的兄弟元素——它位于 .morebuttonbox 外部，而 .more 深嵌在 .morebuttonbox > .morebutton > a 内部，CSS 选择器无法反向跨越 DOM 层级。
现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已广泛支持 :has() 伪类，它允许我们基于子元素状态“回溯”选择父级或同级容器。本方案的核心思路是：将触发逻辑上移至 .morebuttonbox 容器，并用 :has(.more:focus) 判断其内部按钮是否获得焦点，再通过相邻兄弟选择器 ~ 控制 .contentbox2 的显隐。
以下是完整可运行的实现方案：
<div class="morebuttonbox">
<div class="morebutton">
<button class="more">more</button>
</div>
</div>
<div class="contentbox2">
<div class="byi">
<span style="background-color:#ecd0ff;color:#7d6f85;padding:1px 5px; border-radius:3px; border:1px solid black; border-color:white #ae9cb9 #8b7c94 #7d6f85;">byi</span>
text text text text text text text text text text text text text ...
<div class="dni">
<span style="background-color:#ecd0ff;color:#7d6f85;padding:1px 5px; border-radius:3px; border:1px solid black; border-color:white #ae9cb9 #8b7c94 #7d6f85;">dni</span>
text text text text text text text text text text text text text ...
</div>
</div>
</div>对应关键 CSS：
立即学习“前端免费学习笔记（深入）”；
/* 保持原有样式不变 */
.morebuttonbox {
height: 60px;
width: 70px;
background-image: repeating-linear-gradient(0deg, #ecd0ff, #ecd0ff 1px, transparent 0, transparent 50%);
background-size: 8px 8px;
background-color: #fcf8f8;
position: absolute;
margin-top: 260px;
border: 1px solid black;
border-color: white #ae9cb9 #8b7c94 #7d6f85;
}
.morebutton {
font-size: 14px;
background: #e0e0e0;
padding: 2px;
width: 50px;
text-align: center;
margin: auto;
margin-top: 16px;
border: 1px ridge black;
border-color: white #ae9cb9 #8b7c94 #7d6f85;
}
.contentbox2 {
background: white;
height: 130px;
width: 301px;
border: 1px solid black;
border-color: white #ae9cb9 #8b7c94 #7d6f85;
position: absolute;
margin-top: 190px;
margin-left: 69px;
z-index: 1;
opacity: 0;
transition: opacity 0.2s ease, z-index 0.2s;
}
.byi, .dni {
width: 270px;
height: 50px;
word-break: break-word;
margin-left: 15px;
}
.byi { margin-top: 10px; }
.dni { margin-top: 20px; }
/* ✅ 关键：利用 :has() 回溯容器，再控制兄弟元素 */
.morebuttonbox:has(.more:focus) ~ .contentbox2 {
opacity: 1;
z-index: 10;
}⚠️ 重要注意事项：
- 必须使用
<button></button>（而非<a href="#"></a>），因为<a></a>在部分浏览器中默认不支持:focus（尤其无tabindex时），而<button></button>原生可聚焦且语义正确； -
.contentbox2必须与.morebuttonbox处于同一 DOM 层级，且在其后（满足~相邻兄弟选择器条件）； - 添加
transition可使显示/隐藏更平滑； - 点击页面空白处时，
.more自动失焦 →:has(.more:focus)不再匹配 →.contentbox2隐去，完全符合“点击消失”需求； - 若需兼容旧版浏览器（如 IE 或早期 Chrome/Firefox），必须降级为 JavaScript 方案（监听
click+blur事件）。
此方法以声明式 CSS 实现了接近 JS 的交互能力，兼顾简洁性、可维护性与无障碍访问（按钮天然支持键盘 Tab 和 Enter 触发），是现代前端开发中值得掌握的实用技巧。
