:has() 伪类如何消除 CSS 中 JavaScript Hack 的需要-css教程-PHP中文网

首页

web前端

css教程

:has() 伪类如何消除 CSS 中 JavaScript Hack 的需要

Mary-Kate Olsen

Nov 30, 2024 am 03:50 AM

How :has() Pseudo-Class Eliminates the Need for JavaScript Hacks in CSS

还记得那些时候，当您需要根据子元素设置父元素的样式时，您最终编写了一堆 JavaScript 只是为了添加一个简单的类吗？好吧，那些日子终于过去了！ CSS :has() 伪类可以拯救世界，为世界各地的前端开发者改变游戏规则。

:has() 有什么大惊小怪的？

将 :has() 视为您的 CSS 水晶球 – 它可以让您查看元素内部以检查它们包含的内容。当 div 内部有图像时，想要以不同的方式设置其样式吗？就像编写 div:has(> img) 一样简单。不需要 JavaScript！

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

登录后复制

大多数现代浏览器现在都支持 :has()，尽管 Internet Explorer 用户（如果您仍然需要支持它们）将需要后备。但不要让这阻止你——渐进增强是你的朋友！

旧方式与新潮流

让我们来谈谈一些曾经让我们抓狂的常见场景。还记得这些吗？

表单字段验证之舞

老方法：

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

登录后复制

新方式：

.form-group:has(input:invalid) {
  border-color: red;
  background: #fff8f8;
}

登录后复制

不再有事件侦听器或类切换 - 只有纯粹的声明性 CSS。是不是很漂亮？

下拉菜单改造

我们都经历过这样的情况——尝试在菜单打开时设置下拉容器的样式。以前，您需要 JavaScript 在 DOM 树中上下切换类。

旧的 JavaScript 方法：

const dropdown = document.querySelector('.dropdown');
const menu = dropdown.querySelector('.menu');

menu.addEventListener('click', () => {
  dropdown.classList.toggle('is-open');
});

登录后复制

新的 CSS 方法：

.dropdown:has(.menu:focus-within) {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

登录后复制

现实世界的魔术：has()

让我们看一些 :has() 真正发挥作用的实际例子：

1. 智能图库

希望您的画廊根据其包含的内容类型调整其布局？简单易行！

.gallery:has(img) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery:has(video) {
  display: flex;
  flex-direction: column;
}

登录后复制

您可以将 Medium 文章的链接集成到您的新文章中，将其用作参考、引用或灵感来源。以下是如何有效地包含它：

交互式表单、下拉菜单和同级状态管理只是 CSS 现在处于领先地位的几个例子。正如这篇富有洞察力的 Medium 文章中所指出的，像 :has() 这样的现代技术允许 CSS 直接管理这些任务，而无需依赖 JavaScript。

2. 表单字段依赖关系

选中复选框时需要突出显示整个部分？没问题！

.section:has(input[type="checkbox"]:checked) {
  background: #e8f4ff;
  padding: 1rem;
  border-radius: 4px;
}

登录后复制

3. 空状态处理

想要在容器为空时显示消息吗？ :has() 为你提供支持：

/* This targets any div that contains an image */
div:has(img) {
  padding: 1rem;
  background: #f5f5f5;
}

/* This one's more specific - only direct children */
div:has(> img) {
  border: 2px solid #ddd;
}

登录后复制

性能取胜

使用 :has() 代替 JavaScript 的好处是：这不仅仅是为了编写更少的代码。您的页面实际上会表现得更好，因为：

浏览器的样式引擎本地处理所有工作
没有 JavaScript 执行开销
不断添加/删除类不会造成布局抖动
更少的事件侦听器堵塞您的页面

最佳实践和陷阱

虽然 :has() 很棒，但有一些事情需要记住：

保持简单
不要过度使用复杂的选择器。仅仅因为您可以编写 div:has(> span:has(> img)):has( p) 并不意味着您应该这样做！
渐进增强
对于不支持 :has():
的浏览器，始终有一个明智的后备方案

const formGroup = document.querySelector('.form-group');
const input = formGroup.querySelector('input');

input.addEventListener('invalid', () => {
  formGroup.classList.add('has-error');
});

登录后复制