CSS :has() 伪类
示例
为紧跟在 <p> 元素之后的 <h2> 元素设置样式
h2:has(+ p) {
color: gray;
background-color: gold;
border: 2px dotted red;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
:has() 伪类匹配任何具有特定同级元素或内部包含特定元素的父元素。
使用示例
- 根据特定的同级元素或其内部内容来隐藏或显示元素
- 如果存在特定内容，则更改事物的布局
- 如果父元素具有某些类型的同级元素或内部内容，则使它们看起来不同
| 版本 | CSS4 |
|---|
浏览器支持
表中数字表示该伪类完全支持的第一个浏览器版本。
| 伪类 | |||||
|---|---|---|---|---|---|
| :has() | 105 | 105 | 121 | 15.4 | 91 |
CSS 语法
:has(relative-selector-list) {
CSS 声明;
}
更多示例
示例
为内部有 <h1> 元素的 <section> 元素设置样式，并为内部有类名为 'funfact' 的元素的 <section> 元素设置样式
section:has(h1) {
background-color: gold;
}
section:has(.funfact) {
color: blue;
}
自己动手试一试 »
示例
为（<ul> 中的）内部有已选中 <input> 元素的 <li> 元素设置样式
ul li:has(input:checked) {
border:2px solid maroon;
}
自己动手试一试 »
