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;
}

  
    <title>CSS :has() Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
  
  
    <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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg?x-oss-process=image/resize,p_40" 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() 的优点

1. 提高可读性：

   • 减少了对复杂 JavaScript 检测和操作 DOM 的需求。

2. 提升性能：

   • 与类似效果的 JavaScript 解决方案相比，轻量级且高效。

3. 简化 CSS:

   • 为复杂关系启用声明式样式，最大限度地减少额外的类或属性。

---

浏览器支持

到目前为止，大多数现代浏览器都支持 :has() 伪类，包括：

• Chrome：105
• 边缘：105
• Safari：15.4
• Firefox：正在考虑支持。

对于较旧的浏览器，您可能需要后备或填充。

---

结论

:has() 伪类是现代 CSS 中的游戏规则改变者，带来了期待已久的父选择器功能。凭借其根据元素关系有条件地设置元素样式的能力，它简化了 CSS 代码，增强了动态样式，并减少了对 JavaScript 进行 DOM 操作的依赖。

探索项目中的 :has() 伪类，并为创意和高效的网页设计解锁新的可能性！