首页 >web前端 >css教程 >CSS :has() 伪类：强大的动态样式选择器

CSS :has() 伪类：强大的动态样式选择器

Mary-Kate Olsen原创: 2024-12-23 18:55:20294浏览

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="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg" 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中文网其他相关文章！

JavaScript firefox css chrome safari edge if for include using class dom this input li Game Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Style JSF-Generated HTML Elements with Colons in Their IDs Using CSS?下一篇：How Can I Style Only Internet Explorer (All Versions) Using CSS Alone?

查看更多