如何选择作为锚元素的直接父元素的<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选择器“General Sibling Combinator”可能用于您想要的用途:
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。
其他回答
没有css(因此在css预处理器中)父选择器,因为“css工作组先前拒绝父选择器建议的主要原因与浏览器性能和增量渲染问题有关。”
这是Selectors Level 4规范中讨论最多的方面。这样,选择器就可以通过在给定的选择器(!)后面使用感叹号来根据其子元素设置元素的样式。
例如:
body! a:hover{
background: red;
}
如果用户悬停在任何锚点上,将设置红色背景色。
但我们必须等待浏览器的实现:(
基于子元素更改父元素当前只能在父元素中有<input>元素时发生。当输入获得焦点时,其对应的父元素可能会使用CSS受到影响。
以下示例将帮助您理解在CSS中使用:focus in。
.外部div{宽度:400px;高度:400px;填充:50px;浮动:左侧}.outer div:聚焦在{背景:红色;}.内部div{宽度:200px;高度:200px;浮动:左侧;背景:黄色;填充:50px;}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div(背景色)类。有可能吗?<input type=“text”placeholder=“Name”/></div></div>
据我所知,CSS 2中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。
您可以使用以下脚本:
*! > 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中工作。