仅用 HTML 和 CSS 即可实现：当用户选择不同 radio 按钮时，自动将对应 的 href 值（或自定义文本）注入到页面任意位置的 .some 链接中，无需 JavaScript。核心依赖现代 CSS 伪类 :has() 和 :is()。

仅用 html 和 css 即可实现：当用户选择不同 radio 按钮时，自动将对应 `

✅ 注意事项与最佳实践：

• :has() 不支持在 CSS 中用于 @keyframes 或 @media 内部，且不能作为 :not() 的参数（即 :not(:has(...)) 无效）；
• 所有 :has() 规则必须置于 body 或其他共同祖先容器上，并确保 .some 在 DOM 中位于该祖先之后（推荐放在 body 底部以保障顺序）；
• 若需显示动态 href 值本身（如 "https://www.php.cn/link/5f45cd69a2685d75f923bd8b723a1824" 字符串），CSS 无法直接读取属性（attr(href) 仅支持 content，且对 / 无效），因此需预先约定 ID/class 名与目标文本映射关系（如 #https://www.php.cn/link/5f45cd69a2685d75f923bd8b723a1824 → "https://www.php.cn/link/5f45cd69a2685d75f923bd8b723a1824"），这是当前纯 CSS 方案的合理设计边界；
• 为提升可维护性，建议为每个 radio 添加语义化 id 和统一前缀（如 opt-https://www.php.cn/link/5f45cd69a2685d75f923bd8b723a1824, opt-happy2），并在 CSS 中用 :is([id^="opt-"]:checked) 实现批量匹配。

? 总结：该方案证明了现代 CSS 已具备可观的状态驱动能力。虽然无法替代 JS 处理复杂逻辑，但在表单反馈、步骤指示、主题切换等场景中，body:has(...) + ::after 是轻量、可靠、无障碍友好的首选方案。只需确保浏览器兼容性（建议通过 caniuse.com/:has 核查目标用户环境），即可安全上线。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！