CSS `:has()` 实战指南：让 CSS 拥有“if 逻辑”

🔮 CSS `:has()` 实战指南：让 CSS 拥有"if 逻辑"

你是否经常写这样的 JS：
js 复制代码
if (element.querySelector('input:checked')) {
  element.classList.add('active');
}
现在，只需要用 :has()，你就能让 CSS 自己完成判断。

:has() 是一个关系伪类选择器，允许你根据子元素或后代元素的状态，来影响父元素的样式。

css 复制代码

.parent:has(.child) {
  background: lightyellow;
}

📌 含有 .child 的 .parent 会被选中。

html 复制代码

<div class="form-item">
  <input type="text" required>
  <span class="error">必填项</span>
</div>

css 复制代码

.form-item:has(input:invalid) {
  border: 1px solid red;
}

.form-item:has(input:valid) {
  border: 1px solid green;
}

✅ 父容器会根据 input 的校验状态自动改变样式，无需 JS。

html 复制代码

<div class="card">
  <button>操作</button>
</div>

css 复制代码

.card:has(:hover) {
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

📌 当 .card 内任何子元素 hover 时，整个卡片都会响应。

html 复制代码

<nav class="menu">
  <details>
    <summary>更多选项</summary>
    <ul>
      <li>设置</li>
      <li>帮助</li>
    </ul>
  </details>
</nav>

css 复制代码

.menu:has(details[open]) {
  background: #f0f9ff;
}

✅ 当 <details> 展开时，父级菜单会自动改变背景，完全不需要写 JS。

与否定逻辑结合

css 复制代码

.list:has(:not(li)) {
  background: #fee2e2; /* 如果列表为空，标记 */
}

与交互伪类结合

css 复制代码

.card:has(button:focus) {
  outline: 2px solid blue;
}

条件式布局控制

css 复制代码

.grid:has(.wide) {
  grid-template-columns: 2fr 1fr;
}

📌 大多数现代浏览器已经支持，Firefox 也即将跟进。

:has() 是让 CSS 更加"智能"的关键一步，它让样式具备逻辑判断能力，能大幅减少 JS 样式控制逻辑，是现代 CSS 架构中不可或缺的新利器。