前端开发中有一类需求非常普遍：根据某个表单控件的状态，动态改变其他元素的样式或显示隐藏。比如勾选复选框显示一个面板、选中某个单选按钮高亮对应卡片、或者输入框为空时禁用提交按钮。这些需求通常需要JavaScript监听事件、添加或删除类名。现在，CSS :has()选择器提供了原生能力，让我们可以直接在样式表中描述这类“父元素根据子元素状态变化”的逻辑。
本文通过三个完整的实战案例，从简单到复杂，展示如何用:has()替代JavaScript解决常见的交互问题，同时保持代码的简洁和可维护性。
一、:has()选择器基础
:has()是一个关系型伪类，它匹配那些包含符合选择器参数的后代元素的元素。语法为父元素:has(子元素选择器)。例如，div:has(> img) 会匹配所有直接包含图片的div。
- 相对选择器：可以在:has()中使用
>、+、~等组合器，也可以使用伪类如:checked、:focus、:valid。 - 性能：浏览器对:has()进行了优化，但应避免在全局选择器（如
body:has(...)）上使用过于宽泛的条件。 - 浏览器支持：Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+均已支持。
一个最简单的例子：当表单内包含无效输入时，让表单本身出现红色边框。
form:has(input:invalid) {
border: 2px solid red;
}二、案例一：多级筛选列表（根据勾选动态过滤内容）
假设有一个产品列表，上方有分类筛选复选框，勾选“电子产品”则只显示电子产品，同时勾选多个分类则显示所有匹配结果。传统做法需要JavaScript进行显示隐藏切换，而用:has()可以在CSS中直接描述这种关系。
2.1 HTML结构
<div class="filter-bar">
<label><input type="checkbox" name="cat" value="electronics"> 电子产品</label>
<label><input type="checkbox" name="cat" value="clothing"> 服装</label>
<label><input type="checkbox" name="cat" value="food"> 食品</label>
</div>
<div class="product-list">
<div class="product" data-cat="electronics">手机</div>
<div class="product" data-cat="electronics">笔记本</div>
<div class="product" data-cat="clothing">T恤</div>
<div class="product" data-cat="food">巧克力</div>
<div class="product" data-cat="electronics">平板</div>
<div class="product" data-cat="clothing">牛仔裤</div>
</div>2.2 CSS逻辑
核心思路：默认显示所有产品；当没有任何复选框被选中时也显示所有产品（通过:has()检测到没有:checked复选框的情况）；一旦有复选框被选中，就隐藏那些data-cat不在选中集合中的产品。我们需要分别定义每一类产品的显示规则。
/* 默认全部显示（无筛选时） */
.product { display: block; }
/* 当有复选框选中时，隐藏所有产品 */
.filter-bar:has(:checked) ~ .product-list .product {
display: none;
}
/* 分别定义每个复选框选中时，对应产品的显示 */
.filter-bar:has(input[value="electronics"]:checked) ~ .product-list .product[data-cat="electronics"] {
display: block;
}
.filter-bar:has(input[value="clothing"]:checked) ~ .product-list .product[data-cat="clothing"] {
display: block;
}
.filter-bar:has(input[value="food"]:checked) ~ .product-list .product[data-cat="food"] {
display: block;
}这样就实现了纯CSS的多条件筛选，无需任何JavaScript。用户勾选复选框时，对应的产品项自动显示，未匹配的隐藏，同时支持多选叠加。
三、案例二：星级评分组件（悬停和选中状态的纯CSS实现）
星级评分通常用JavaScript处理鼠标悬停高亮和选中状态。借助:has()配合:hover和:checked，可以实现完全无JS的交互评分组件。
3.1 HTML结构
<div class="star-rating">
<input type="radio" name="rating" id="star5" value="5">
<label for="star5">★</label>
<input type="radio" name="rating" id="star4" value="4">
<label for="star4">★</label>
<input type="radio" name="rating" id="star3" value="3">
<label for="star3">★</label>
<input type="radio" name="rating" id="star2" value="2">
<label for="star2">★</label>
<input type="radio" name="rating" id="star1" value="1">
<label for="star1">★</label>
</div>3.2 CSS样式（展示:has()用法）
把input隐藏，label排列成一行。高亮原理：当鼠标悬停在某个label上时，高亮它及其前面的所有兄弟label；当某个radio被选中时，高亮对应label及其前面的label。这些都需要用:has()来检测父容器内是否有:checked或:hover状态。
.star-rating { direction: rtl; display: inline-flex; } /* 反向排列以便兄弟选择器向前工作 */
.star-rating input { display: none; }
.star-rating label { font-size: 2rem; color: #ccc; cursor: pointer; }
/* 悬停高亮：当容器内任意label被悬停时，高亮当前label及其前面的所有label */
.star-rating label:hover,
.star-rating label:hover ~ label {
color: gold;
}
/* 选中高亮：当容器内有radio被选中时，高亮对应的label及其前面的label */
.star-rating:has(input:checked) label {
color: #ccc; /* 先重置 */
}
/* 利用兄弟选择器高亮选中项及之前的所有label */
.star-rating input:checked ~ label,
.star-rating input:checked + label {
color: gold;
}注意：上面的选中高亮写法并不完全依赖:has()，因为可以直接用input:checked与label的兄弟关系。但为了让“有任何一个radio被选中”这一条件生效，可以用:has()来区分“未评分”和“已评分”状态。例如，当没有选中任何星星时显示提示文字。
.rating-hint::after {
content: "请选择评分";
}
.star-rating:has(input:checked) ~ .rating-hint::after {
content: "已评分";
}这种状态感知能力是纯CSS交互的核心价值。
四、案例三：无JS模态弹窗（利用:checked + :has控制弹出层）
常见的模态弹窗由JavaScript控制一个隐藏层的显示。利用一个隐藏的checkbox和:has()，可以创建纯CSS的模态对话框。
4.1 HTML结构
<input type="checkbox" id="modal-toggle" hidden>
<label for="modal-toggle" class="open-btn">打开弹窗</label>
<div class="modal-overlay">
<div class="modal-content">
<p>这是纯CSS实现的模态框。</p>
<label for="modal-toggle" class="close-btn">关闭</label>
</div>
</div>4.2 CSS控制显示隐藏
.modal-overlay {
display: none;
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
}
/* 当checkbox被勾选时，显示遮罩 */
body:has(#modal-toggle:checked) .modal-overlay {
display: flex;
}这里使用了body:has()来根据全局checkbox状态控制遮罩的显示。点击遮罩背景或关闭按钮可以通过再次点击label来取消勾选checkbox，从而关闭弹窗。整个过程完全由CSS驱动，JavaScript代码为零。
五、对比传统方案的收益
- 性能提升：减少JavaScript监听和DOM操作，浏览器在样式计算时直接处理，响应更快。
- 代码量减少：许多简单的显示/隐藏逻辑不再需要写事件监听函数。
- 可维护性：状态与样式紧密绑定，阅读CSS即可理解交互行为，不需要在JS文件中查找状态切换代码。
- 渐进增强：如果浏览器不支持:has()，组件可以退化为始终显示所有内容（如筛选列表显示全部产品），基本功能仍可用。
六、注意事项与最佳实践
- 避免在
html:has()或body:has()中使用过于宽泛的选择器，以免频繁触发样式重算。 - :has()不能嵌套使用过深，例如
div:has(p:has(span))虽然语法允许，但可读性差且可能影响性能。 - 对于复杂的业务逻辑（如需要修改数据、发送请求等），仍需要JavaScript。:has()适合纯视图层的状态驱动样式。
- 在需要支持旧版浏览器的项目中，考虑使用@supports进行特性检测，提供降级方案：
@supports selector(:has(*)) { ... }
七、总结
CSS :has()选择器将“父元素感知子元素状态”的能力带入了样式表，使得很多原本必须依赖JavaScript的UI交互可以完全用声明式CSS来实现。本文的三个案例——筛选列表、星级评分、模态弹窗——覆盖了前端开发中最常见的状态驱动场景，展示了:has()的灵活性和实用性。
当下次遇到“根据某个控件状态切换其他元素样式”的需求时，不妨先思考一下是否可以用:has()解决。你会发现，很多时候我们写的JavaScript只是为了弥补CSS能力的不足，而现在这个缺口已经被填上了。
