如何使用Pure CSS为不包含指定子元素的父元素设置样式

现在可以用CSS原生的:has()伪类实现你要的效果，这个选择器支持基于后代元素的匹配规则筛选父元素，搭配:not()选择器就能实现「不包含指定子元素的父元素」匹配。

示例代码 #

.block { 
  display: flex;
}
/* 匹配所有内部没有span元素的.block容器 */
.block:not(:has(span)) { 
  align-items: center;
}

兼容性说明 #

• Chrome 105+、Safari 15.4+、Firefox 121+ 均已原生支持:has()选择器，符合现代浏览器的兼容要求。
• 如果需要适配更低版本的浏览器，可以调整实现思路：先给.block默认设置align-items: center，再给包含span的.block下的子元素单独设置对齐规则，效果等价：

.block {
  display: flex;
  align-items: center;
}
/* 存在span时覆盖h1的对齐方式 */
.block h1:has(+ span) {
  align-self: flex-start;
}

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