:has()能替代javascript高亮逻辑，因为它允许父元素根据子元素状态反向设置样式，如卡片含.status--urgent时自动加边框，无需监听dom或手动增删类名，从而减少js介入带来的性能抖动和维护成本。
为什么:has()能替代JavaScript高亮逻辑
因为:has()允许父元素根据子元素状态反向设置样式，比如卡片内有.status--urgent时，给整个.card加边框——这原本得靠监听DOM变化+手动增删类名。:has()让这类“条件渲染”回归纯CSS，避免JS介入带来的性能抖动和维护成本。
但要注意：它不触发重排，只影响绘制，所以不能用来控制display或height等布局属性；另外目前:has()不支持伪元素（如:hover）作为参数，也不能写成:has(.item:hover)这种嵌套交互判断。
:has()在卡片高亮中的典型写法
假设卡片结构是<article class="card"><div class="meta"><span class="label">NEW</span></div>
<p>内容...</p></article>，想让含.label的卡片整体高亮：
article.card:has(.label) {
border: 2px solid #ff6b6b;
box-shadow: 0 0 8px rgba(255, 107, 107, 0.3);
}
常见变体：
- 匹配多个子条件：
article.card:has(.label, .badge--hot)（任一存在即生效） - 排除干扰项：
article.card:has(.label:not(.label--archived)) - 结合兄弟选择器：
article.card:has(+ .alert)（后紧邻一个.alert元素）
兼容性与 fallback 方案怎么设
Chrome 105+、Edge 105+、Safari 15.4+ 支持:has()；Firefox 121+ 开始支持，但默认需开启layout.css.has-selector.enabled标志（生产环境暂不建议依赖）。
稳妥做法是用@supports做渐进增强：
@supports selector(:has(*)) {
article.card:has(.label) {
border-color: #ff6b6b;
}
}
/* fallback：靠JS或服务端注入class */
article.card[data-has-label] {
border-color: #ccc;
}
注意：@supports里必须用selector(:has(*))，不能简写为selector(:has())，否则Safari会误判为不支持。
容易被忽略的性能陷阱
:has()内部是深度遍历子树，如果父选择器太宽泛（比如div:has(.trigger)），浏览器可能遍历大量无关节点，尤其在长列表中滚动时引发卡顿。
优化建议：
- 限定父级作用域：
.card:has(.label)比div:has(.label)快得多 - 避免深层嵌套：
.card:has(.meta > .label)比.card:has(.label)略慢，非必要不加层级 - 不用在动画关键路径上：别把
:has()和transform/opacity动画混用，它本身不参与合成层提升
真要动态控制高亮又怕兼容性，不如直接用classList.toggle()配合MutationObserver监听子元素变更——虽然多几行JS，但可控性远高于CSS黑盒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
