如何为包含<a>子元素的父级h4元素设置CSS样式？

当然可行！你之前用的~是后续兄弟选择器，它的作用是选择某个元素之后的同级兄弟元素，这和你要找“包含<a>子元素的<h4>父元素”的需求完全不匹配，所以才达不到预期效果。

正确的选择器：:has()伪类 #

CSS的:has()伪类就是专门用来解决“选择包含特定子元素的父元素”这类需求的，语法非常直观：

/* 选择直接包含 <a> 子元素的 <h4> */
h4:has(> a) {
  border-bottom: 10px solid blue;
}

/* 所有 <h4> 的基础样式 */
h4 {
  border-bottom: 5px solid red;
}

这里的> a表示匹配<h4>的直接子元素<a>，如果你允许<a>是<h4>的深层后代（比如嵌套在其他标签里），可以去掉>写成h4:has(a)。

兼容性说明 #

目前主流浏览器（Chrome、Edge、Safari，以及Firefox 120及以上版本）都已经支持:has()伪类，如果你需要兼容更旧的浏览器，可能需要借助JavaScript来实现类似效果，但现在绝大多数场景下:has()已经足够好用了。

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