如何选择作为锚元素的直接父元素的<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>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
没有父选择器;就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是,浏览器必须遍历元素的所有子元素,以确定是否应应用类。例如,如果您写道:
body:contains-selector(a.active) { background: red; }
然后,浏览器必须等到加载并解析完所有内容,直到</body>确定页面是否应为红色。
《为什么我们没有父选择器》一文详细解释了这一点。
其他回答
简短的回答是“否”;在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;
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
W3C排除了这种选择器,因为它会对浏览器产生巨大的性能影响。
我认为你不能只在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
否,不能仅在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。