has() CSS 新样式

2024 年浏览器可以使用 CSS 伪类 :has()。这个:has()伪类具有非常强大的潜力。这是:has()因为伪类允许您为任何关系指定选择器。

:has() 伪类的基本用法

:has()伪类通过传递给它的选择器来选择父元素。例:

<p class="text">
  <strong>隐约雷鸣</strong> 阴霾天空 但盼风雨来 能留你在此
</p>
<p class="text">隐约雷鸣 阴霾天空 即使天无雨 我亦留此地</p>

.text {
  color: #000;
}
.text:has(strong) {
  color: red;
}

由于第一个元素.text有标签，因此:has(strong)应用伪类，文本颜色变为红色。第二个.text元素没有标签，因此文本颜色保持黑色。

就其本身而言，这只是父元素的选择器，但:has()伪类的真正强大之处在于它们允许您追溯到父元素，从而允许您编写超越 HTML 中的父子关系的选择器。

在 JavaScript 中使用 has()

当使用 Canvas 等进行绘制时，可以使用 JavaScript 来控制视觉变化。在这种情况下，您不仅可以在 CSS 中使用:has()伪类，还可以将其用作 JavaScript 函数的查询。querySelector()

// 鼠标坐标
const mousePosition = { x: 0, y: 0 };
// 粒子默认值
const defualtSettings = {
  /* 省略 */
};
// 粒子设置
let particleSettings = {
  /* 省略 */
};
document.addEventListener("mousemove", (event) => {
  // 更新鼠标坐标并更改粒子位置
  mousePosition.x = event.pageX;
  mousePosition.y = event.pageY;
  const isATagHovered = document.querySelector("body:has(a:hover)");
  if (isATagHovered) {
    // 悬停时更改粒子设置
    particleSettings = {
      ...defaultSettings,
      particleNum: 4,
      xVariance: 70,
      yVariance: 70,
    };
  } else {
    // 否则返回默认设置
    particleSettings = { ...defaultSettings };
  }
});

:has()使用的好处是不需要为各个标签设置事件处理程序，mousemove悬停控制可以在事件内完成。在此示例中，与事件处理程序相比，使用标签:has()可能没有太大优势，但在处理复杂状态时，可能很难同时组合来自不同事件处理程序的处理。它将在处理复杂的 Canvas 表达式时展现出它的威力。