如何选择作为锚元素的直接父元素的<li>元素?
例如,我的CSS应该是这样的:
li < a.active {
property: value;
}
很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
如何选择作为锚元素的直接父元素的<li>元素?
例如,我的CSS应该是这样的:
li < a.active {
property: value;
}
很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
其他回答
正如其他一些人所提到的,没有一种方法可以仅使用CSS来设置元素的父级,但以下方法适用于jQuery:
$("a.active").parents('li').css("property", "value");
如果子代具有焦点,则内的伪元素: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>
可以使用:has()CSS伪类
但它的浏览器支持有限(目前只有Chrome/Edge/Safari)。
我会雇佣一些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选择器“General Sibling Combinator”可能用于您想要的用途:
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。