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

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

li < a.active {
    property: value;
}

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

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


当前回答

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

E ~ F {
    property: value;
}

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

其他回答

Selectors Level 4 Working Draft包含一个:has()伪类,将提供此功能。它将类似于jQuery实现,但目前Firefox不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

截至2022年,Firefox是唯一默认不支持它的浏览器。

同时,如果需要选择完全支持跨浏览器的父元素,则必须在Firefox中使用JavaScript。

如果子代具有焦点,则内的伪元素:focus允许选择父代。

如果元素具有tabindex属性,则可以聚焦该元素。

浏览器支持

标签索引

实例

.parent:焦点在{背景:hsl(199deg,65%,73%);}/*演示样式*/正文{边距:0;}.父级{背景:hsl(0,0%,80%);最小高度:100vh;显示:栅格;放置内容:中心;}.儿童{背景:hsl(0,0%,0%);颜色:白色;填充:3rem;大纲:0;光标:指针;字体:18px/1.25无衬线;宽度:20ch;}<div class=“parent”><div class=“child”tabindex=“1”>点击或关注我,我的父母会改变。</div></div>

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

这是Selectors Level 4规范中讨论最多的方面。这样,选择器就可以通过在给定的选择器(!)后面使用感叹号来根据其子元素设置元素的样式。

例如:

body! a:hover{
   background: red;
}

如果用户悬停在任何锚点上,将设置红色背景色。

但我们必须等待浏览器的实现:(

您可以尝试使用超链接作为父级,然后在悬停时更改内部元素。这样地:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

这样,您可以根据父元素的滚动来更改多个内部标记中的样式。