:has() 选择器：为 CSS 带来真实的逻辑

Source: Dev.to

“If” 逻辑在 CSS 中 — 是真的。

我们都说过：

“CSS 不能做逻辑。”

结果……这并不正确。

有了 :has()，CSS 可以像 if 条件一样工作——让你根据元素内部包含的内容或正在发生的情况来为其设置样式。

/* If a card has an image, add a border */
.card:has(img) {
  border: 2px solid #4f46e5;
}

通俗来说：如果一个 .card 包含 img，就应用该样式。

为什么这很重要

• 减少用于管理 UI 状态的 JavaScript
• 更具响应性、智能的布局
• 更简洁、清晰的组件逻辑