有 CSS 父选择器吗？

Question

如何选择作为锚元素的直接父元素的 <li> 元素？

例如，我的 CSS 是这样的：

 li < a.active {
    property: value;
}

显然有一些使用 JavaScript 的方法，但我希望有某种解决方法存在于 CSS Level 2 中。

我正在尝试设置样式的菜单被 CMS 吐出，所以我无法将活动元素移动到 <li> 元素…（除非我为菜单创建模块设置主题而不是这样做）。

原文由 jcuenod 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

目前没有办法以一种适用于所有浏览器的方式在 CSS 中选择元素的父级。

也就是说， 选择器级别 4 工作草案 包括一个 :has() 伪类，它将提供此功能。它将类似于 jQuery 实现。

 li:has(> a.active) { /* styles to apply to the li tag */ }

截至 2022 年， 它仅受 Safari 和 Chromium 浏览器支持。

同时，如果您需要选择具有完全跨浏览器支持的父元素，则必须求助于 JavaScript。

原文由 Dan Herbert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你可以使用 :has() CSS伪类

但它对 浏览器的支持有限（目前只有 Chrome / Edge / Safari）。

原文由 Yukulélé 发布，翻译遵循 CC BY-SA 4.0 许可协议