CSS :has() 伪类：强大的动态样式选择器
CSS 不断发展，使开发人员能够轻松构建动态、直观且具有视觉吸引力的网页。其中一项增强功能是现代 CSS 中引入的 :has() 伪类。这个伪类带来了父级感知选择功能，允许您根据子元素或兄弟元素的存在或状态有条件地应用样式。
本文通过示例解释了 :has() 伪类，以展示其灵活性和强大功能。
什么是 :has() 伪类？
:has() 伪类通常被称为“父选择器”，因为它允许您根据元素的子元素、兄弟元素或后代元素设置样式。
selector:has(selectorList)
- 选择器是规则适用的主要元素。
- 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;
}
/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS :has() Example</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div>
<p><strong>Explanation</strong></p>
<p><em>Basic Styles</em><br>
The .box class defines small red rectangles with a margin.<br>
The .circle class creates blue circular elements.</p>
<p>Dynamic Sizing Using :has():<br>
The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>
<p><em>Visual Output</em></p>
<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg" class="lazy" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling"></p>
<h2>
Use Cases for :has()
</h2>
<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
1. <strong>Interactive Layouts</strong>
</h3>
<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>
<pre class="brush:php;toolbar:false">.card:has(button) {
border: 2px solid green;
}
2. 动态导航菜单
将样式应用到父级
li:has(ul) {
font-weight: bold;
}
3. 表单验证
突出显示基于同级或父元素的无效输入字段。
.form-group:has(input:invalid) {
border-color: red;
}
4. 自定义兄弟姐妹关系
根据其相邻同级元素设置元素的样式。
h1:has(+ p) {
margin-bottom: 10px;
}
:has() 的优点
-
提高可读性：
- 减少了对复杂 JavaScript 检测和操作 DOM 的需求。
-
提升性能：
- 与类似效果的 JavaScript 解决方案相比，轻量级且高效。
-
简化 CSS:
- 为复杂关系启用声明式样式，最大限度地减少额外的类或属性。
浏览器支持
到目前为止，大多数现代浏览器都支持 :has() 伪类，包括：
- Chrome：105
- 边缘：105
- Safari：15.4
- Firefox：正在考虑支持。
对于较旧的浏览器，您可能需要后备或填充。
结论
:has() 伪类是现代 CSS 中的游戏规则改变者，带来了期待已久的父选择器功能。凭借其根据元素关系有条件地设置元素样式的能力，它简化了 CSS 代码，增强了动态样式，并减少了对 JavaScript 进行 DOM 操作的依赖。
探索项目中的 :has() 伪类，并为创意和高效的网页设计解锁新的可能性！
以上是CSS :has() 伪类：强大的动态样式选择器的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？
Apr 05, 2025 pm 05:51 PM
关于Flex布局中紫色斜线区域的疑问在使用Flex布局时，你可能会遇到一些令人困惑的现象，比如在开发者工具（d...
