复杂的CSS选择器,用于活动子项的父项

这个问题在这里已经有了答案:

  • 有没有一个CSS父母选择器? 26个答案

  • 不幸的是,用CSS无法做到这一点。

    虽然JavaScript不是很困难:

    // JavaScript code:
    document.getElementsByClassName("active")[0].parentNode;
    
    // jQuery code:
    $('.active').parent().get(0); // This would be the <a>'s parent <li>.
    

    根据维基百科:

    选择器无法提升

    CSS无法选择满足特定条件的元素的父代或祖代。 更高级的选择器方案(例如XPath)将启用更复杂的样式表。 然而,CSS工作组拒绝父代选择器提案的主要原因与浏览器性能和增量渲染问题有关。

    对于将来搜索SO的任何人,这可能也被称为祖先选择器。

    更新:

    选择器级别4规范允许您选择选择的哪一部分是主题:

    选择器的主题可以通过向选择器中的一个复合选择器添加美元符号($)来显式识别。 尽管选择器表示的元素结构在带有或不带美元符号时是相同的,但用这种方式指示主体可以更改哪个化合物选择器表示该结构中的主体。

    例1:

    例如,以下选择器代表列表项目LI有序列表OL的唯一子项:

    OL > LI:only-child
    

    然而,下面的代表具有独特孩子的有序列表OL,该孩子是LI:

    $OL > LI:only-child
    

    这两个选择器代表的结构是相同的,但选择器的主题不是。

    尽管在任何浏览器中或者作为jQuery中的选择器都不可用(当前为2011年11月)。


    晚会到了晚会,但为了它的价值,可以使用jQuery来简洁一点。 在我的情况下,我需要找到包含在子<li>中的<span>标签的<ul>父标签。 jQuery具有:has选择器,所以可以通过它包含的子项来识别父项(更新为@ Afrowave的注释ref:https://api.jquery.com/has-selector/):

    $("ul").has("#someId")
    

    将选择具有id为someId的子元素的ul元素。 或者回答最初的问题,像下面这样的事情应该可以做到这一点(未经测试):

    $("li").has(".active")
    
    链接地址: http://www.djcxy.com/p/3897.html

    上一篇: Complex CSS selector for parent of active child

    下一篇: How to write Silverlight Controls that don't leak memory