:has() 是唯一支持向上反向匹配的 CSS 伪类，可精准选中含特定子元素的按钮；旧浏览器需用交集选择器配合显式 class 标记，避免后代选择器或属性模糊匹配导致误选。
用 :has() 选择器匹配含特定子元素的按钮
现代浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）已原生支持 :has()，它是目前唯一能「向上反向匹配」的 CSS 伪类：给定一个按钮，只要它内部存在某个子元素（比如 svg 或 .loading），就能选中这个按钮本身。
常见错误是试图用后代选择器（如 button .icon）反推父级——这在纯 CSS 中做不到；也别硬套 [class*="loading"] 这类属性模糊匹配，它不检查 DOM 结构关系，极易误伤。
-
button:has(svg)—— 选中所有含svg子元素的button -
button:has(.spinner)—— 选中含 class 为spinner的直接或嵌套子元素的按钮 -
button:has(> .disabled)—— 加>限定只认直接子元素，更精准
兼容旧浏览器时改用 class 标记 + 交集选择器
如果要支持 IE 或老版 Chrome/Firefox，:has() 不可用，就得靠开发者主动加 class。这不是妥协，而是更可控的实践：把「按钮是否含加载图标」这种状态显式暴露在 HTML 层。
关键点在于避免用空格分隔的后代写法（如 .btn .loading），那会选中任意后代，不是按钮本身；必须用无空格的交集写法，确保 class 同时存在于同一个 button 元素上。
立即学习“前端免费学习笔记（深入）”；
- HTML 写成：
<button class="btn btn--loading"><span class="loading"></span></button> - CSS 写成：
button.btn--loading { opacity: 0.7; pointer-events: none; } - 不要写
button .btn--loading（空格导致选错目标）或.btn--loading button（顺序颠倒）
慎用 [class*="xxx"] 匹配按钮内部结构
有人想绕过 class 命名，直接用属性选择器抓「带 loading 字样的按钮」，比如 button[class*="loading"]。这很危险：
- 它匹配的是按钮自身的
class属性值包含"loading"，和它里面有没有子元素完全无关 - 若按钮 class 是
"btn primary-loading"，会被误判；而class="btn"但内部有<div class="loading">的，反而漏掉 -
class是空格分隔的多值字段，*=把整个字符串当连续文本搜，语义断裂
链式 > 能帮你验证子元素层级，但不能反向选父级
> 只能向下定位，比如 button > svg 能选中按钮里的直接 svg，但它选的是 svg，不是按钮。如果你需要基于这个结构做样式联动（比如按钮有 svg 时禁用 hover 效果），仅靠 > 无法实现——你得要么用 :has()，要么回退到 class 标记方案。
容易被忽略的是：一旦 DOM 结构微调（比如加了一层 span 包裹 svg），button > svg 就失效，但 button:has(svg) 依然有效，因为它不依赖层级深度。
