CSS :has()伪类

定义和用法

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

使用举例：

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

实例

例子1

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

h2:has(+ p) {
  颜色：灰色;
  背景颜色：金色;
  边框：2px点划线红色;
{}

亲自试试

例子2

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

section:has(h1) {
  背景颜色：金色;
{}
section:has(.funfact) {
  颜色：蓝色;
{}

亲自试试

例子3

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

ul li:has(input:checked) {
  边框：2px实线酒红色;
{}

亲自试试

CSS语法

:has(相对选择器列表) {
  css声明;
{}

技术细节

浏览器支持

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