如何选择作为锚元素的直接父元素的<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的这个阶段,我们没有父选择器,但是如果你不需要交换元素或类,第二个选项是使用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中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。
没有父选择器;就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是,浏览器必须遍历元素的所有子元素,以确定是否应应用类。例如,如果您写道:
body:contains-selector(a.active) { background: red; }
然后,浏览器必须等到加载并解析完所有内容,直到</body>确定页面是否应为红色。
《为什么我们没有父选择器》一文详细解释了这一点。
否,不能仅在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
尝试将a切换为块显示,然后使用所需的任何样式。a元素将填充li元素,您可以根据需要修改其外观。不要忘记将li padding设置为0。
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
从技术上讲,没有直接的方法可以做到这一点。但是,您可以使用jQuery或JavaScript进行排序。
然而,你也可以这样做。
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
如果您想使用jQuery实现这一点,这里是jQuery父选择器的引用。