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(相对选择器列表) {
css 声明;
}
更多示例
示例
为内部包含<h1>元素的<section>元素设置样式，以及为内部包含具有'funfact'类的元素的<section>元素设置样式
section:has(h1) {
background-color: gold;
}
section:has(.funfact) {
color: blue;
}
亲自试一试 »
