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

例如,我的CSS应该是这样的:

li < a.active {
    property: value;
}

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

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


当前回答

有一个插件可以扩展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仅用于与元素查询匹配的元素,等等。

其他回答

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

li.active > a {
    property: value;
}

可以使用:has()CSS伪类

但它的浏览器支持有限(目前只有Chrome/Edge/Safari)。

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 2中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。

只是一个水平菜单的想法。。。

HTML的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS的一部分

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

更新的演示和其余代码

另一个示例是如何将其用于文本输入-选择父字段集