有没有办法根据类中子元素的类选择父元素？与我相关的示例与http://drupal.org的精美菜单插件的HTML输出相关.输出呈现如下:
我的问题是,是否可以将样式应用于包含具有活动类的锚的列表项.显然,我更喜欢将列表项标记为活动,但我无法控制生成的代码.我可以使用javascript(JQuery spring to mind)执行此类操作,但我想知道是否有使用CSS选择器的方法.
为了清楚起见,我想将一个样式应用于列表项,而不是锚.
根据维基百科:
选择者无法提升
CSS无法选择满足特定条件的元素的父元素或祖先元素.更高级的选择器方案(例如XPath)将启用更复杂的样式表.但是,CSS工作组拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关.
对于将来搜索SO的任何人来说,这也可能被称为祖先选择器.
更新:
该选择器4级规格,您可以选择其中选择的部分是主题:
选择器的主题可以通过在选择器中的一个复合选择器前加一个美元符号($)来明确地识别.尽管选择器表示的元素结构与美元符号相同或不相同,但以这种方式指示主题可以更改哪个复合选择器表示该结构中的主题.
例1:
例如,以下选择器表示有序列表OL的列表项LI唯一子项:
OL > LI:only-child然而,下面的代表一个有一个唯一孩子的有序列表OL,该孩子是LI:
$OL > LI:only-child由这两个选择器表示的结构是相同的,但选择器的主体不是.
虽然这在任何浏览器中都不可用(目前,2011年11月),或者作为jQuery中的选择器.
不幸的是,没有办法用CSS做到这一点.
但是使用JavaScript并不是很困难:
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the 's parent .
迟到了派对,但是为了它的价值,可以使用jQuery更简洁一些.在我的情况下,我需要找到孩子中包含标签的父标签.jQuery具有:has选择器,因此可以通过它包含的子节点识别父节点(根据@ Afrowave的注释ref:https://api.jquery.com/has-selector/更新):
$("ul").has("#someId")
将选择ul具有id为someId的子元素的元素.或者回答原始问题,类似下面的内容应该可以做到(未经测试):
$("li").has(".active")
现在,没有选择在CSS中选择元素的父元素(甚至不是CSS3).但是对于CSS4,当前W3C草案中最重要的新闻是对父选择器的支持.
$ul li:hover{
background: #fff;
}
使用上面的内容,当悬停列表元素时,将通过向其添加白色背景来突出显示整个无序列表.
官方文件:https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview(最后一行).
选择器级别4的初稿概述了一种显式设置选择器主题的方法.这将允许OP使用选择器设置list元素的样式$li > a.active
从确定选择器的主题:
例如,以下选择器表示有序列表OL的列表项LI唯一子项:
OL > LI:only-child然而,下面的代表一个有一个唯一孩子的有序列表OL,该孩子是LI:
$OL > LI:only-child由这两个选择器表示的结构是相同的,但选择器的主体不是.
编辑:鉴于规范草案的"草率"如何,最好通过检查4级选择器上的CSSWG页面来关注这一点.
京公网安备 11010802040832号 | 京ICP备19059560号-6 
