如何选择作为锚元素的直接父元素的<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>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
目前还没有父选择器&它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。
这里有很多技术解释。
Jonathan Snook解释了如何评估CSS。
Chris Coyier谈家长选择。
Harry Roberts再次谈到了如何编写高效的CSS选择器。
但妮可·沙利文对积极趋势有一些有趣的事实。
这些人都是前端开发领域的顶级人物。
其他回答
至少包括CSS 3,你不能这样选择。但是现在用JavaScript可以很容易地完成,你只需要添加一些普通的JavaScript,注意代码很短。
cells=document.querySelectorAll('div');[].forEach.call(单元格,函数(el){//console.log(el.nodeName)如果(el.hasChildNodes()&&el.firstChild.nodeName==“A”){控制台日志(el)};});彼得</div><div><a href=“#”>Jackson链接</a></div>菲利普</div><div><a href=“#”>Pullman链接</a></div>
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
下面是一个使用悬停指针事件的黑客:
<!doctype html><html><head><title></title><style>/*附件*/.父级{宽度:200px;高度:200px;背景:灰色;}父母亲.选择器{显示:柔性;对齐内容:中心;对齐项目:居中;}.选择器{光标:指针;背景:银色;宽度:50%;高度:50%;}</style><style>/*相关的*/.父级{背景:灰色;指针事件:无;}.parent:悬停{背景:紫红色;}父母亲.选择器{指针事件:自动;}</style></head><body><div class=“parent”><div class=“selector”></div></div></body></html>
目前还没有父选择器&它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。
这里有很多技术解释。
Jonathan Snook解释了如何评估CSS。
Chris Coyier谈家长选择。
Harry Roberts再次谈到了如何编写高效的CSS选择器。
但妮可·沙利文对积极趋势有一些有趣的事实。
这些人都是前端开发领域的顶级人物。
基于子元素更改父元素当前只能在父元素中有<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>