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

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

li < a.active {
    property: value;
}

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

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


当前回答

否,不能仅在CSS中选择父级。

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

其他回答

虽然目前标准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

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

基于子元素更改父元素当前只能在父元素中有<input>元素时发生。当输入获得焦点时,其对应的父元素可能会使用CSS受到影响。

以下示例将帮助您理解在CSS中使用:focus in。

.外部div{宽度:400px;高度:400px;填充:50px;浮动:左侧}.outer div:聚焦在{背景:红色;}.内部div{宽度:200px;高度:200px;浮动:左侧;背景:黄色;填充:50px;}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div(背景色)类。有可能吗?<input type=“text”placeholder=“Name”/></div></div>

没有父选择器;就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是,浏览器必须遍历元素的所有子元素,以确定是否应应用类。例如,如果您写道:

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

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

《为什么我们没有父选择器》一文详细解释了这一点。

目前还没有父选择器&它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。

这里有很多技术解释。

Jonathan Snook解释了如何评估CSS。

Chris Coyier谈家长选择。

Harry Roberts再次谈到了如何编写高效的CSS选择器。

但妮可·沙利文对积极趋势有一些有趣的事实。

这些人都是前端开发领域的顶级人物。