# CSS :has() 参考

URL: https://caijiao.org/reference/css/has
Source: docs/reference/css/has.md
Description: CSS :has() Reference，整理父选择器、条件选择、表单状态、卡片样式、可运行演示和常见错误。

`:has()` 是关系伪类，可以根据内部元素或后续元素状态匹配当前元素。它常被称为“父选择器”，但也可以表达更广的关系条件。

## 语法

```css
.field:has(input:invalid) {
  border-color: #dc2626;
}
```

## 常见用法

```css
article:has(img) {
  display: grid;
}

form:has(:invalid) button[type="submit"] {
  opacity: 0.6;
}
```

## 可运行演示

[在线代码演示](/reference/css/demos/has-form-state.html)

## 常见错误

- 选择器写得过宽，导致样式影响大量父级元素。
- 用 `:has()` 做复杂状态管理，后期维护困难；复杂交互仍应交给 JavaScript。
- 忽略浏览器兼容性和性能，尤其是在大范围 DOM 上使用复杂选择器。

## 相关内容

- [CSS Reference](/reference/css/)
- [CSS 伪类选择器](/css/02-selectors/04-pseudo-class)
- [HTML form 参考](/reference/html/form)
- [MDN :has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)