如何选择作为锚元素的直接父元素的<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(因此在css预处理器中)父选择器,因为“css工作组先前拒绝父选择器建议的主要原因与浏览器性能和增量渲染问题有关。”
其他回答
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
试试这个。。。
此解决方案使用无Javascript的简单CSS2规则,适用于所有浏览器,无论新旧浏览器。单击时,子锚点标记将激活其活动的伪类事件。然后,它简单地隐藏自己,允许活动事件向上冒泡到父li标签,然后父li标签重新设计自己的样式,并以新样式再次显示其锚定子对象。子对象已设置父对象的样式。
使用您的示例:
<ul>
<li class="listitem">
<a class="link" href="#">This is a Link</a>
</li>
</ul>
现在,将这些样式应用于a上的活动伪类,以在单击链接时重新设置父li标记的样式:
a.link {
display: inline-block;
color: white;
background-color: green;
text-decoration: none;
padding: 5px;
}
li.listitem {
display: inline-block;
margin: 0;
padding: 0;
background-color: transparent;
}
/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */
a.link:active {
display: none;
}
.listitem:active {
background-color: blue;
}
.listitem:active a.link {
display: inline-block;
background-color: transparent;
}
单击时,您应该会看到带有绿色背景的链接现在变为列表项的蓝色背景。
转到
单击。
目前还没有父选择器&它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。
这里有很多技术解释。
Jonathan Snook解释了如何评估CSS。
Chris Coyier谈家长选择。
Harry Roberts再次谈到了如何编写高效的CSS选择器。
但妮可·沙利文对积极趋势有一些有趣的事实。
这些人都是前端开发领域的顶级人物。
我认为你不能只在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
否,不能仅在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。