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

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

li < a.active {
    property: value;
}

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

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


当前回答

如果子代具有焦点,则内的伪元素: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>

其他回答

简短的回答是“否”;在CSS的这个阶段,我们没有父选择器,但是如果你不需要交换元素或类,第二个选项是使用JavaScript。类似于:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Your property: value;
  }
});

或者,如果在应用程序中使用jQuery,可以使用更短的方法:

$('a.active').parents('li').css('color', 'red'); // Your property: value;

下面是一个使用悬停指针事件的黑客:

<!doctype html><html><head><title></title><style>/*附件*/.父级{宽度:200px;高度:200px;背景:灰色;}父母亲.选择器{显示:柔性;对齐内容:中心;对齐项目:居中;}.选择器{光标:指针;背景:银色;宽度:50%;高度:50%;}</style><style>/*相关的*/.父级{背景:灰色;指针事件:无;}.parent:悬停{背景:紫红色;}父母亲.选择器{指针事件:自动;}</style></head><body><div class=“parent”><div class=“selector”></div></div></body></html>

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

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

这里有很多技术解释。

Jonathan Snook解释了如何评估CSS。

Chris Coyier谈家长选择。

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

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

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

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

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

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

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