CSS :has() 伪类

定义和用法

CSS :has() 伪类用于匹配具有特定兄弟元素或内部包含特定元素的任何父元素。

使用举例：

• 根据特定兄弟元素或内部内容隐藏或显示元素
• 如果存在特定内容，则更改布局
• 如果父元素具有特定类型的兄弟元素或内部内容，则使其外观不同

实例

例子 1

设置紧跟在 <p> 元素之后的 <h2> 元素的样式：

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

亲自试一试

例子 2

设置内部包含 <h1> 元素的 <section> 元素的样式，同时设置内部包含类名为 funfact 的元素的 <section> 元素的样式：

section:has(h1) {
  background-color: gold;
}

section:has(.funfact) {
  color: blue;
}

亲自试一试

例子 3

设置内部包含被选中的 <input> 元素的 <li> 元素（在 <ul> 中）的样式：

ul li:has(input:checked) {
  border:2px solid maroon;
}

亲自试一试

CSS 语法

:has(relative-selector-list) {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪类的首个浏览器版本。