是否有CSS父选择器？

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

例如，我的CSS应该是这样的：

li < a.active {
    property: value;
}

很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。

我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。

当前回答

W3C排除了这种选择器，因为它会对浏览器产生巨大的性能影响。

其他回答

从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用jQuery或JavaScript进行排序。

然而，你也可以这样做。

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

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

如果您想使用jQuery实现这一点，这里是jQuery父选择器的引用。

在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:

li.active > a {
    property: value;
}

有一个插件可以扩展CSS，以包含一些非标准功能，这些功能在设计网站时非常有用。这叫做EQCSS。

EQCSS添加的内容之一是父选择器。它适用于所有浏览器，Internet Explorer 8及更高版本。格式如下：

@element 'a.active' {
  $parent {
    background: red;
  }
}

因此，我们在每个元素a.active上打开了一个元素查询，对于该查询中的样式，类似$parent这样的东西是有意义的，因为有一个参考点。浏览器可以找到父节点，因为它与JavaScript中的parentNode非常相似。

这里有一个$parent的演示和另一个在Internet Explorer 8中运行的$parent演示，以及一个屏幕截图，以防您没有Internet Explorer 8进行测试。

EQCSS还包括元选择器：$prev用于所选元素之前的元素，$this仅用于与元素查询匹配的元素，等等。

我会雇佣一些JavaScript代码来实现这一点。例如，在React中，当您遍历数组时，向父组件添加另一个类，这表明它包含您的子组件：

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

然后简单地：

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

我认为你不能只在CSS中选择父级。

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

推荐文章