如何选择作为锚元素的直接父元素的<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>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
尝试将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: ...
}
其他回答
我知道OP正在寻找CSS解决方案,但使用jQuery很容易实现。在我的例子中,我需要为包含在子<li>中的<span>标记找到<ul>父标记。jQuery具有:has选择器,因此可以通过它包含的子项来标识父项:
$("ul:has(#someId)")
将选择具有id为someId的子元素的ul元素。或者,为了回答最初的问题,应该使用以下方法(未经测试):
$("li:has(.active)")
您可以使用以下脚本:
*! > input[type=text] { background: #000; }
这将选择文本输入的任何父级。但等等,还有很多。如果需要,可以选择指定的父级:
.input-wrap! > input[type=text] { background: #000; }
或在它处于活动状态时选择它:
.input-wrap! > input[type=text]:focus { background: #000; }
查看此HTML:
<div class="input-wrap">
<input type="text" class="Name"/>
<span class="help hide">Your name sir</span>
</div>
当输入激活时,您可以选择该span.help并显示:
.input-wrap! .help > input[type=text]:focus { display: block; }
还有更多的功能;只需查看插件的文档即可。
顺便说一下,它在Internet Explorer中工作。
现在是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中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
您可以尝试使用超链接作为父级,然后在悬停时更改内部元素。这样地:
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
这样,您可以根据父元素的滚动来更改多个内部标记中的样式。