如何选择作为锚元素的直接父元素的<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来设置元素的父级,但以下方法适用于jQuery:
$("a.active").parents('li').css("property", "value");
其他回答
虽然目前标准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排除了这种选择器,因为它会对浏览器产生巨大的性能影响。
我认为你不能只在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
CSS父选择器(也称为:has()选择器)终于在Safari TP 137中落地。该功能目前也在Chrome中实现。(MDN文档)
父级选择是通过伪类:has()完成的。例如,div:hhas(>.child)将选择具有子类的子级的所有<div>元素。
其他示例:
选择元素的直接父级
<div>
<p>Child Element</p>
</div>
div:has(> p)
选择元素的所有父级
<div id="grandparent">
<div id="parent">
<div id="child"></div>
<div>
</div>
以下选择器将同时选择祖父母和父母
div:has(.child)
您还可以将其用于嵌套选择器,甚至用于其他伪类:
div:has(> :nth-child(10))
可以使用其他有效的CSS运算符自定义查询。
密切关注caniuse.com/css-has的浏览器兼容性。
没有css(因此在css预处理器中)父选择器,因为“css工作组先前拒绝父选择器建议的主要原因与浏览器性能和增量渲染问题有关。”