有一个CSS父选择器吗？

Question

如何选择<li>作为锚元素直接父元素的元素？在示例中，我的CSS将是这样的：li < a.active {     property: value;}显然有一些方法可以使用JavaScript来实现这一点，但我希望CSS Level 2本身存在某种解决方法。我尝试设置样式的菜单正在由CMS喷出，因此我无法将活动元素移动到<li>元素...（除非我主题菜单创建模块，我宁愿不这样做）。有任何想法吗？

Answer 1

目前无法在CSS中选择元素的父级。

如果有办法，它将在当前的CSS选择器规范中：

• 选择器等级3规格

• CSS 2.1选择器规范

与此同时，如果您需要选择父元素，则必须使用JavaScript。

---

该选择器4级工作草案包括:has()伪类的作品一样的jQuery的实现。截至2019年，任何浏览器仍然不支持此功能。

使用:has()原始问题可以通过以下方法解决：

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

Answer 2

我认为你不能只选择css中的父级。

但是，由于您似乎已经有了一个.active类，将该类移动到li（而不是a）上会不会更容易？这样你就可以只访问li和a通过css。

Answer 3

正如其他几个人所提到的那样，没有办法只使用CSS来设置元素的父/的样式，但以下内容适用于jQuery：

$("a.active").parents('li').css("property", "value");

Answer 4

没有父选择器; 只是没有以前的兄弟选择器的方式。没有这些选择器的一个好理由是浏览器必须遍历元素的所有子元素以确定是否应该应用类。例如，如果您写道：

body:contains-selector(a.active) { background: red; }

然后浏览器必须等到它已加载并解析所有内容，直到</body>确定页面是否应为红色。

本文为什么我们没有父选择器详细解释它。