如何在 CSS 中选择父元素

CSS 中没有用于选择父元素的直接选择器。但是，CSS4 引入了 :has() 伪类，它可以让您选择包含特定子元素的父元素。

例如，以下 CSS 将选择所有包含具有类名 “active” 的 a 元素的 li 元素：

li:has(a.active) {
  /* 应用于 li 标签的样式 */
}

:has() 伪类还可以在 CSS 中用于许多其他目的，例如：

• 选择包含特定表单元素的父元素
• 选择包含特定图像的父元素
• 选择包含特定文本的父元素

:has() 伪类目前在大多数主要浏览器中都得到支持，但需要注意的是，它在 Firefox 中默认情况下尚未启用。如果您需要在 Firefox 中使用 :has() 伪类，则需要在 about:config 中将 layout.css.has-selector.enabled 更改为 true。

如果您需要一个在所有主要浏览器中都工作的解决方案，那么您将不得不使用 JavaScript 来选择父元素。

以下是一些使用 JavaScript 选择父元素的示例：

// 获取包含特定子元素的父元素
const parent = document.querySelector("li").parentNode;

// 获取包含具有类名 "active" 的 a 元素的父元素
const parent = document.querySelector("a.active").parentNode;

// 获取包含具有特定 ID 的图像的父元素
const parent = document.querySelector("#my-image").parentNode;

如果您正在编写 CSS4 代码，我建议您使用 :has() 伪类来选择父元素。它是一种更现代、更有效的方法来编写 CSS。