标准css不支持父选择器，因选择机制单向且反向查找破坏性能与层叠逻辑；:has()是唯一原生方案，可基于子元素状态为父元素添加样式，但不改变选择方向。
标准 CSS 中没有直接选择父元素的选择器。这是设计使然，不是浏览器实现不到位。
为什么不能直接选父元素
CSS 的选择机制是单向的：从祖先到后代。浏览器解析样式时按 DOM 树自上而下匹配，反向查找父元素会破坏性能模型，也违背层叠（cascade）逻辑。所以像 .child:parent(.parent) 或 .child ^ .parent 这类写法在任何浏览器中都不生效。
- 所有主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）都明确不支持父选择器语法
-
:has()是唯一接近“反向感知”的能力，但它仍不选择父元素本身，而是让父元素“响应子元素状态” - 所谓“
.md-dialog > *选父元素”是常见误解——它实际选的是.md-dialog的直接子元素，不是它的父级
用 :has() 实现父级条件样式
这是目前最接近“基于子元素控制父元素”的原生方案，但注意：它只允许你给父元素加样式，前提是它满足某个子元素条件。
- 语法必须是
父选择器:has(子选择器)，例如：.container:has(.error)匹配含有.error子元素的.container - 要兼容旧版 Safari（≤15.3），必须用
@supports selector(:has(*))包裹，且需提供 JS fallback - 空格、换行、注释会影响
:has(> .item)匹配——因为文本节点会改变子元素的:nth-child()序号，导致静默失效 - 不能写
:has(.child) .parent：这种写法试图“从子反推父”，CSS 不允许，会被忽略
真正可靠的替代路径
当 :has() 不可用或逻辑超纲时，以下方式更可控：
- 重构 HTML：把状态类直接加在父元素上，比如
<div class="form-group error">，再写 <code>.form-group.error - 用 JavaScript 动态操作：通过
element.closest('.parent')获取父节点并加 class，比监听 DOM 变化更轻量 - 用 SCSS 的
&简化嵌套书写，但它只是编译期语法糖，不改变选择方向，例如：.parent { &.expanded { ... } }编译后仍是.parent.expanded - 避免“必须靠父选择器才能解”的设计——多数场景其实可通过子元素自身状态（如
:valid、:checked、[data-state]）配合:has()或属性选择器绕过
最容易被忽略的一点：很多你以为需要“选父元素”的需求，其实只需要让父元素“感知子元素存在或状态”。:has() 能做到这点，但它的边界很清晰——它不突破选择器的方向性，也不修复结构混乱的 HTML。真要动态响应文本内容、计算子元素数量、或处理 SSR 首屏不一致，JS 仍是不可替代的环节。
