是否有CSS父选择器？

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

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

li < a.active {
    property: value;
}

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

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

当前回答

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

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

然后简单地：

.parent {
    color: #000;
}

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

其他回答

我知道OP正在寻找CSS解决方案，但使用jQuery很容易实现。在我的例子中，我需要为包含在子<li>中的<span>标记找到<ul>父标记。jQuery具有：has选择器，因此可以通过它包含的子项来标识父项：

$("ul:has(#someId)")

将选择具有id为someId的子元素的ul元素。或者，为了回答最初的问题，应该使用以下方法（未经测试）：

$("li:has(.active)")

CSS选择器“General Sibling Combinator”可能用于您想要的用途：

E ~ F {
    property: value;
}

这匹配前面有E元素的任何F元素。

我会雇佣一些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父选择器（也称为：has（）选择器）终于在Safari TP 137中落地。该功能目前也在Chrome中实现。（MDN文档）

父级选择是通过伪类：has（）完成的。例如，div:hhas（>.child）将选择具有子类的子级的所有＜div＞元素。

其他示例：

选择元素的直接父级

<div>
  <p>Child Element</p>
</div>

div:has(> p)

选择元素的所有父级

<div id="grandparent">
      <div id="parent">
            <div id="child"></div>
      <div>
</div>

以下选择器将同时选择祖父母和父母

div:has(.child)

您还可以将其用于嵌套选择器，甚至用于其他伪类：

div:has(> :nth-child(10))

可以使用其他有效的CSS运算符自定义查询。

密切关注caniuse.com/css-has的浏览器兼容性。

正如其他一些人所提到的，没有一种方法可以仅使用CSS来设置元素的父级，但以下方法适用于jQuery：

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

推荐文章