如何选择作为锚元素的直接父元素的<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>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
我知道OP正在寻找CSS解决方案,但使用jQuery很容易实现。在我的例子中,我需要为包含在子<li>中的<span>标记找到<ul>父标记。jQuery具有:has选择器,因此可以通过它包含的子项来标识父项:
$("ul:has(#someId)")
将选择具有id为someId的子元素的ul元素。或者,为了回答最初的问题,应该使用以下方法(未经测试):
$("li:has(.active)")
其他回答
下面是一个使用悬停指针事件的黑客:
<!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>
只是一个水平菜单的想法。。。
HTML的一部分
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
CSS的一部分
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
更新的演示和其余代码
另一个示例是如何将其用于文本输入-选择父字段集
CSS父选择器(也称为:has()选择器)终于在Safari TP 137中落地。该功能目前也在Chrome中实现。(MDN文档)
父级选择是通过伪类:has()完成的。例如,div:hhas(>.child)将选择具有子类的子级的所有<div>元素。
其他示例:
选择元素的直接父级
<div>
<p>Child Element</p>
</div>
div:has(> p)
选择元素的所有父级
<div id="grandparent">
<div id="parent">
<div id="child"></div>
<div>
</div>
以下选择器将同时选择祖父母和父母
div:has(.child)
您还可以将其用于嵌套选择器,甚至用于其他伪类:
div:has(> :nth-child(10))
可以使用其他有效的CSS运算符自定义查询。
密切关注caniuse.com/css-has的浏览器兼容性。
据我所知,CSS 2中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。
至少包括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>