css 赋予开发者构建动态、直观且美观的网页的能力，而 :has() 伪类正是其最新增强功能之一。此伪类引入了父级感知选择功能，允许您根据子元素或兄弟元素的存在或状态来有选择地应用样式，从而提升网页设计的灵活性和效率。
本文将通过示例演示 :has() 伪类的用法及其强大功能。
什么是 :has() 伪类？
:has() 伪类，也称为“父选择器”，允许您根据元素的子元素、兄弟元素或后代元素来设置样式。其语法如下：
selector:has(selectorlist)
其中：
-
selector是应用样式的主要元素。 -
selectorlist是条件，包含子元素、兄弟元素或与主要元素相关的其他元素。
主要特点：
立即学习“前端免费学习笔记（深入）”；
- 父级感知: 样式根据其后代或兄弟元素应用于元素。
-
灵活的条件: 可与
>、+、~等组合符结合使用，建立兄弟和子级关系。 - 增强交互性: 无需 JavaScript 即可创建动态布局或效果。
实际示例：根据兄弟元素样式化盒子
以下示例演示如何使用 :has() 根据兄弟元素来调整盒子的样式：
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 代码:
CSS :has() example
说明:
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
-
基础样式:
.box类定义红色小矩形，.circle类定义蓝色圆形元素。 -
使用
:has():.box:has(+ .circle)规则将样式应用于紧跟.circle元素后的.box元素，使其尺寸变为 80px x 80px。 -
视觉效果: 最初所有盒子大小一致，应用
:has()后，紧挨圆形元素之前的方块会变大。
:has() 的应用场景
:has() 伪类的应用非常广泛：
- 交互式布局: 根据子元素或兄弟元素的存在来设置父元素样式，例如，包含按钮的卡片可被高亮显示：
.card:has(button) {
border: 2px solid green;
}
- 动态导航菜单: 如果列表项包含子列表，则可为其父列表项应用样式：
li:has(ul) {
font-weight: bold;
}
- 表单验证: 基于兄弟或父元素突出显示无效输入字段：
.form-group:has(input:invalid) {
border-color: red;
}
- 自定义兄弟关系: 根据相邻兄弟元素设置元素样式：
h1:has(+ p) {
margin-bottom: 10px;
}
:has() 的优势
- 增强可读性: 减少对复杂 JavaScript 代码的需求。
- 提升性能: 比类似的 JavaScript 解决方案更高效。
- 简化 CSS: 使用声明式样式处理复杂关系，减少额外类或属性的使用。
浏览器支持
目前大多数现代浏览器都支持 :has() 伪类，包括 Chrome、Edge 和 Safari 的最新版本。 Firefox 的支持正在考虑中。 对于旧版浏览器，可能需要使用备用方案或 polyfill。
结论
:has() 伪类是 CSS 中一项重要的增强功能，它简化了 CSS 代码，增强了动态样式能力，并减少了对 JavaScript 的依赖。 在您的项目中尝试使用 :has()，探索其在创造性和高效网页设计中的潜力。
