如何用纯 CSS 实现选中单选按钮时高亮对应图片（去除灰度）-html教程-PHP中文网

如何用纯 CSS 实现选中单选按钮时高亮对应图片（去除灰度）

本文介绍一种无需 JavaScript 的简洁方案：利用 CSS :has() 伪类选择器，根据单选按钮的选中状态，精准定位并修改其同级元素的 filter: grayscale(0) 样式，实现响应式视觉反馈。

本文介绍一种无需 javascript 的简洁方案：利用 css `:has()` 伪类选择器，根据单选按钮的选中状态，精准定位并修改其同级 `` 元素的 `filter: grayscale(0)` 样式，实现响应式视觉反馈。

在前端开发中，常需根据表单控件（如 radio 按钮）的状态动态更新关联元素样式。传统做法依赖 JavaScript 监听事件、遍历 DOM、查找父容器再定位子元素——不仅代码冗长，还易出错（例如原问题中混淆了 jQuery 方法 .parent() 与原生 parentNode，且未正确处理 DOM 层级关系）。实际上，现代 CSS 提供了更优雅、声明式、高性能的解决方案。

✅ 推荐方案：纯 CSS `:has()` 选择器

CSS :has() 是一个父选择器（parent selector），允许你基于后代/兄弟元素的状态来选中祖先元素。结合本例结构——<input> 与 <img> 同为 <label></label> 的子元素——我们可直接编写：

label:has(input:checked) img {
  filter: grayscale(0);
}
.avatar-img-select {
  height: 52px;
  filter: grayscale(1); /* 默认灰度 */
}

该规则含义是：当 <label></label> 内部存在被选中的 <input> 时，将其内部的所有 <img> 元素的灰度滤镜设为 0（即彩色）。由于 <img> 和 <input> 在 DOM 中处于同一层级（同为 <label></label> 的直系子元素），此写法语义清晰、零 JS、无性能开销，且天然支持所有选中/取消选中状态的自动同步。

? 注意事项与兼容性

✅ 浏览器支持：Chrome 105+、Firefox 121+、Safari 15.4+（iOS 15.4+）、Edge 105+。如需支持旧版浏览器（如 IE 或早期 Chrome），可回退至轻量级 JS 方案（见下方补充）。
⚠️ DOM 结构强约束：:has() 要求目标元素（<img>）必须位于满足条件的祖先（<label></label>）内部。本例中 <label></label> 包裹 <img> 和 <input> 是关键，不可拆分或嵌套过深。
? 禁止在 @keyframes 或 @media 外使用 :has() 作为选择器的一部分（当前规范限制），但本例用法完全合规。

? 补充：轻量 JS 回退方案（如需兼容）

若项目需支持较老浏览器，可优化原 JS 逻辑（避免 ID 查找和错误的 parentNode 调用）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input[name="hero-avatar"]').forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        // 安全获取同 label 下的 img 元素
        const label = this.closest('label');
        const img = label?.querySelector('img');
        if (img) img.style.filter = 'grayscale(0)';
      }
    });
  });
});

此版本使用 closest('label') 精准向上查找最近的 <label></label> 父容器，再通过 querySelector('img') 获取其内部图片，语义明确、兼容性好（IE9+），且无需 jQuery。