如何选择作为锚元素的直接父元素的<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>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
现在是2019年,CSS嵌套模块的最新草稿实际上有这样的内容。介绍@nest at规则。
3.2.嵌套规则:@nest虽然直接筑巢看起来不错,但它有点脆弱。某些有效的嵌套选择器(如.foo&)是不允许的,以某些方式编辑选择器可能会使规则意外无效。此外,一些人发现嵌套很难从视觉上与周围的声明区分开来。为了解决所有这些问题,本规范定义了@nest规则,它对如何有效地嵌套样式规则施加了较少的限制。其语法为:@nest=@nest<选择器>{<声明列表>}@nest规则的功能与样式规则相同:它以选择器开始,并包含应用于选择器匹配的元素的声明。唯一的区别是@nest规则中使用的选择器必须是嵌套的,这意味着它在某个地方包含嵌套选择器。如果选择器的所有单个复杂选择器都包含嵌套,则选择器列表包含嵌套。
(从上面的URL复制并粘贴)。
本规范下的有效选择器示例:
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
:not(.foo) { color: blue; }
*/
其他回答
简短的回答是“否”;在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;
从技术上讲,没有直接的方法可以做到这一点。但是,您可以使用jQuery或JavaScript进行排序。
然而,你也可以这样做。
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
如果您想使用jQuery实现这一点,这里是jQuery父选择器的引用。
正如其他一些人所提到的,没有一种方法可以仅使用CSS来设置元素的父级,但以下方法适用于jQuery:
$("a.active").parents('li').css("property", "value");
有一个插件可以扩展CSS,以包含一些非标准功能,这些功能在设计网站时非常有用。这叫做EQCSS。
EQCSS添加的内容之一是父选择器。它适用于所有浏览器,Internet Explorer 8及更高版本。格式如下:
@element 'a.active' {
$parent {
background: red;
}
}
因此,我们在每个元素a.active上打开了一个元素查询,对于该查询中的样式,类似$parent这样的东西是有意义的,因为有一个参考点。浏览器可以找到父节点,因为它与JavaScript中的parentNode非常相似。
这里有一个$parent的演示和另一个在Internet Explorer 8中运行的$parent演示,以及一个屏幕截图,以防您没有Internet Explorer 8进行测试。
EQCSS还包括元选择器:$prev用于所选元素之前的元素,$this仅用于与元素查询匹配的元素,等等。
我认为你不能只在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。