仅用 HTML 和 CSS，通过 :has() 与 :is() 选择器监听 radio 选中状态，将对应 href 值（或自定义文本）注入外部 的 ::after 伪元素中，无需 JavaScript。

仅用 html 和 css，通过 `:has()` 与 `:is()` 选择器监听 radio 选中状态，将对应 href 值（或自定义文本）注入外部 `

⚠️ 注意事项与兼容性提醒

• 浏览器支持是前提：:has() 是 css selectors level 4 的特性，旧版浏览器（如 ie、早期 edge）完全不支持；生产环境需检查 caniuse 并考虑降级方案（如隐藏该功能或添加 js 回退）；
• attr() 的局限性：css attr(href) 仅能读取当前元素自身的 href 属性，无法跨元素获取其他标签（如 .tick）的 href。因此不能写成 body:has(#https://www.php.cn/link/5f45cd69a2685d75f923bd8b723a1824:checked) .some::after { content: attr(href); } —— 这会尝试读取 .some 自身的 href，而非 .tick 的。解决方案是：将值冗余存储在 radio 的 id、value 或 data-value 中，并在 :has() 中匹配该属性；
• 性能提示：:has() 是计算成本较高的选择器，避免过度嵌套或高频使用；本例中简单匹配顶层 radio，影响极小；
• 无障碍友好性：伪元素内容（::after）默认不被屏幕阅读器朗读，如需语义化传达状态变化，建议额外添加 aria-live 区域或结合 title 属性增强可访问性。

✅ 总结

该方案彻底摆脱了 javascript 依赖，利用现代 css 的声明式能力实现了“状态驱动 ui 更新”。它不仅满足了原始需求，更体现了 html 结构语义化 + css 行为逻辑分离的设计哲学。只要目标用户环境可控，这就是一个简洁、健壮、符合标准的专业解法。

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载