如何仅用CSS选择包含特定属性/类子div的父容器？

不行，仅靠当前通用兼容的CSS语法无法实现这个需求。

CSS目前没有原生的“父选择器”语法——你之前写的div div[data-value="hi"]这类选择器，都是从父到子的层级匹配，只会选中符合条件的子div，而非它的父容器。

不过有个例外：CSS的:has()伪类可以实现这个功能，但它的兼容性有限，仅支持Chrome 101+、Firefox 121+、Safari 15.4+这类较新的现代浏览器。如果你的项目可以兼容这些版本，写法如下：

• 选择包含带data-value="hi"子div的父div：

div:has(> div[data-value="hi"]) {
  /* 这里写你需要的样式 */
}

• 选择包含带any类名子div的父div：

div:has(> div.any) {
  /* 这里写你需要的样式 */
}

如果需要兼容旧版浏览器，仅靠CSS就做不到了，得借助JavaScript：遍历页面中的子元素，找到符合data-value="hi"或class="any"条件的元素，然后给它们的父div手动添加自定义类名，再用CSS针对这个类名编写样式。

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