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

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

li < a.active {
    property: value;
}

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

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


当前回答

虽然目前标准CSS中没有父选择器,但我正在开发一个名为axe(即增强的CSS选择器语法/ACSSSS)的(个人)项目,该项目在其7个新选择器中包括:

一个直接的父选择器<(它允许相反的选择>)任意祖先选择器^(启用与[SPACE]相反的选择)

axe目前处于相对早期的BETA开发阶段。

请在此处查看演示:

.父级{浮动:左侧;宽度:180px;高度:180px;右边距:12px;背景色:rgb(191191191);}.儿童{宽度:90px;高度:90px;边距:45px;填充顶部:12px;字体系列:无衬线;文本对齐:居中;字体大小:12px;背景色:rgb(255,255,0);}child.using-axe<父级{背景色:rgb(255,0,0);}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里,axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

在上面的示例中,<是直接父选择器,因此

child.using-axe<父级

指:

.child.uning-axe的任何直接父级,即parent

您也可以使用:

.child.using-axe<div

这意味着:

child.using-axe的任何直接父级,它是一个div

其他回答

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

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

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

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

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

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%; }

更新的演示和其余代码

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

虽然目前标准CSS中没有父选择器,但我正在开发一个名为axe(即增强的CSS选择器语法/ACSSSS)的(个人)项目,该项目在其7个新选择器中包括:

一个直接的父选择器<(它允许相反的选择>)任意祖先选择器^(启用与[SPACE]相反的选择)

axe目前处于相对早期的BETA开发阶段。

请在此处查看演示:

.父级{浮动:左侧;宽度:180px;高度:180px;右边距:12px;背景色:rgb(191191191);}.儿童{宽度:90px;高度:90px;边距:45px;填充顶部:12px;字体系列:无衬线;文本对齐:居中;字体大小:12px;背景色:rgb(255,255,0);}child.using-axe<父级{背景色:rgb(255,0,0);}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里,axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

在上面的示例中,<是直接父选择器,因此

child.using-axe<父级

指:

.child.uning-axe的任何直接父级,即parent

您也可以使用:

.child.using-axe<div

这意味着:

child.using-axe的任何直接父级,它是一个div

我会雇佣一些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,以包含一些非标准功能,这些功能在设计网站时非常有用。这叫做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仅用于与元素查询匹配的元素,等等。