css 赋予开发者构建动态、直观且美观的网页的能力，而 :has() 伪类正是其最新增强功能之一。此伪类引入了父级感知选择功能，允许您根据子元素或兄弟元素的存在或状态来有选择地应用样式，从而提升网页设计的灵活性和效率。
本文将通过示例演示 :has() 伪类的用法及其强大功能。
什么是 :has() 伪类？
:has() 伪类，也称为“父选择器”，允许您根据元素的子元素、兄弟元素或后代元素来设置样式。其语法如下：
1
selector:has(selectorlist)
其中：
selector 是应用样式的主要元素。 selectorlist 是条件，包含子元素、兄弟元素或与主要元素相关的其他元素。主要特点：
立即学习“前端免费学习笔记（深入）”；
父级感知: 样式根据其后代或兄弟元素应用于元素。 灵活的条件: 可与 >、+、~ 等组合符结合使用，建立兄弟和子级关系。 增强交互性: 无需 JavaScript 即可创建动态布局或效果。实际示例：根据兄弟元素样式化盒子
以下示例演示如何使用 :has() 根据兄弟元素来调整盒子的样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
font-family: sans-serif;
}
.box {
width: 50px;
height: 40px;
background-color: red;
margin: 5px;
}
.border {
border: 2px solid black;
}
.circle {
width: 40px;
height: 40px;
background-color: blue;
border-radius: 25px;
}
/* 样式应用于紧跟圆形元素的方块 */
.box:has(+ .circle) {
width: 80px;
height: 80px;
}
HTML 代码:
1
2
3
4
5
6
7
8
<title>CSS :has() example</title>
<meta charset="utf-8">
<link href="./styles.css" rel="stylesheet">
<div class="box"></div>
<div class="box"></div>
<div class="box border"></div>
<div class="circle"></div>
<div class="box"></div>
说明:
基础样式: .box 类定义红色小矩形，.circle 类定义蓝色圆形元素。
使用 :has(): .box:has(+ .circle) 规则将样式应用于紧跟 .circle 元素后的 .box 元素，使其尺寸变为 80px x 80px。
视觉效果: 最初所有盒子大小一致，应用 :has() 后，紧挨圆形元素之前的方块会变大。
:has() 的应用场景
:has() 伪类的应用非常广泛：
交互式布局: 根据子元素或兄弟元素的存在来设置父元素样式，例如，包含按钮的卡片可被高亮显示：1
2
3
.card:has(button) {
border: 2px solid green;
}
1
2
3
li:has(ul) {
font-weight: bold;
}
1
2
3
.form-group:has(input:invalid) {
border-color: red;
}
1
2
3
h1:has(+ p) {
margin-bottom: 10px;
}
:has() 的优势
增强可读性: 减少对复杂 JavaScript 代码的需求。 提升性能: 比类似的 JavaScript 解决方案更高效。 简化 CSS: 使用声明式样式处理复杂关系，减少额外类或属性的使用。浏览器支持
目前大多数现代浏览器都支持 :has() 伪类，包括 Chrome、Edge 和 Safari 的最新版本。 Firefox 的支持正在考虑中。 对于旧版浏览器，可能需要使用备用方案或 polyfill。
结论
以上就是CSS :has() 伪类：强大的动态样式选择器的详细内容，更多请关注php中文网其它相关文章！