确认CSS :has选择器对display:none元素的识别行为

CSS的:has选择器可以识别设置了display: none的元素，属于正响应，完全不需要额外结合:not([style*="display: none"])选择器。

核心逻辑 #

:has是基于DOM结构的存在性进行匹配的——只要目标元素在DOM树中存在（没有被remove()等操作从DOM中删除），哪怕它设置了display: none（视觉不可见、不占布局空间），:has依然能检测到它的存在。display: none只是控制元素的渲染状态，不会改变它在DOM中的存在性。

示例验证 #

比如下面的DOM结构：

<div class="card">
  <span class="badge" style="display: none;">隐藏徽章</span>
</div>

使用:has选择器：

/* 即使.badge是display:none，.card依然会被选中 */
.card:has(.badge) {
  background: #f5f5f5;
}

实际效果中，.card会被添加上灰色背景，证明:has确实识别到了隐藏的.badge元素。

关于:not([style*="display: none"]) #

这个选择器的作用是排除内联样式包含display: none的元素，但这和你的需求无关——除非你想让:has只匹配包含“非隐藏状态目标元素”的父元素，否则完全不需要加这个条件。

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