:has() 实现纯 CSS 父级状态控制子级

背景： 过去我们经常因为 CSS 无法向上选择而使用 JavaScript 来控制某些交互。

需求举例： 当一个 checkbox 被勾选时，改变它的父容器样式。

html:

<div class="card">
  <input type="checkbox" class="toggle" />
  <p>我是内容</p>
</div> 

CSS：

.card:has(.toggle:checked) {
  	background-color: #e0ffe0;
 	border: 2px solid green;
}

✅ 效果： 当 .toggle 被选中时，.card 会变色，无需一行 JavaScript。

点我试试

📌 浏览器支持： 截至 2025 年中，大多数现代浏览器（Chrome, Edge, Safari, Firefox）都支持 :has()，但最好检查兼容性或加降级方案。