CSS中父元素含隐藏子元素时，能否触发only-child选择器？

不能。CSS的:only-child选择器完全基于DOM结构中的子元素数量判断，不管元素是否被display:none隐藏，只要它还存在于DOM中，就会被算作父元素的子元素。你代码里的父元素.hide-if-one-child在DOM里有两个子元素，所以永远不会触发任何基于“唯一子元素”的判定。

另外你还搞混了:only-child的作用对象：.hide-if-one-child:only-child是在选择「作为某个父元素唯一子元素的.hide-if-one-child元素」，而不是「只有一个子元素的.hide-if-one-child父元素」，这也是你的代码没生效的原因之一。

仅用CSS实现需求的方案 #

如果你的目标是当父元素中只有一个可见子元素时隐藏父元素，可以用CSS的:has()选择器结合相邻兄弟选择器来实现：

修正后的代码如下：

<div class="hide-if-one-child">
   <div>Hi, am I the only one?</div>
   <div class="hide"></div>
</div>

.hide:empty {
  display: none;
}

/* 仅当父元素存在且仅存在一个可见子元素时，隐藏父元素 */
.hide-if-one-child:has(:not(.hide)):not(:has(:not(.hide) ~ :not(.hide))) {
  display: none;
}

选择器解释：

• :has(:not(.hide))：确保父元素至少有一个可见子元素
• :not(:has(:not(.hide) ~ :not(.hide)))：排除那些有至少两个可见子元素的父元素（~表示当前可见子元素后面还存在另一个可见子元素）

这样就能精准匹配到「只有一个可见子元素」的父元素。

兼容性说明：

:has()选择器目前仅支持现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），如果需要兼容旧版浏览器，仅用CSS无法实现，必须借助JavaScript统计可见子元素的数量。

内容的提问来源于stack exchange，提问作者Tim de Jager