活动子项的父项的复杂CSS选择器\[重复\]

CSS

Mandy

2020-03-23

有没有一种方法可以根据类中子元素的类来选择父元素？与我相关的示例与http://drupal.org的漂亮菜单插件的HTML输出有关。输出呈现如下：

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>

我的问题是，是否可以对包含带有活动类的锚的列表项应用样式。显然，我希望将列表项标记为活动状态，但是我无法控制所生成的代码。我可以使用javascript执行此类操作（想到的是JQuery），但是我想知道是否可以使用CSS选择器来执行此操作。

为了清楚起见，我想将样式应用于列表项，而不是锚点。

第2792篇《活动子项的父项的复杂CSS选择器\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

Gil伽罗小宇宙 2020.03.23

刚才我想到的另一个想法可能是纯CSS解决方案。将活动类显示为绝对定位的块，并设置其样式以掩盖父级li。

a.active {
   position:absolute;
   display:block;
   width:100%;
   height:100%;
   top:0em;
   left:0em;
   background-color: whatever;
   border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
    position:relative;
}

对于那些想在没有jquery的情况下使用javascript的人...

选择父母是微不足道的。您需要某种getElementsByClass功能，除非您可以让您的drupal插件为活动项分配ID而不是Class。我提供的功能是我从SO的其他一些天才那里获得的。它运作良好，请记住在调试时该函数将始终返回节点数组，而不仅仅是单个节点。

active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
       if ( pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
   }
}
return classElements;
}

樱古一 2020.03.23

我对Drupal也有同样的问题。考虑到CSS的局限性，实现此功能的方法是在生成菜单HTML时将“ active”类添加到父元素。在http://drupal.org/node/219804上对此进行了很好的讨论，其主要结果是该功能已集成到nicemenus模块的6.x-2.x版本中。由于此程序仍在开发中，因此我已将该修补程序反向移植到http://drupal.org/node/465738上的6.x-1.3，以便可以继续使用该模块的生产就绪版本。

泡芙梅 2020.03.23

再次晚了聚会，但值得一试的是，使用jQuery可能更简洁。就我而言，我需要为子级中包含<ul>的<span>标签找到父级标签<li>。jQuery具有:has选择器，因此可以通过其包含的子对象来标识父对象（根据@Afrowave的注释引用进行更新：https : //api.jquery.com/has-selector/ ）：

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

将选择ul具有id为someId的子元素的元素。或回答原始问题，应使用以下方法解决问题（未测试）：

$("li").has(".active")

斯丁前端 2020.03.23

CSS4选择器的未来答案

新的CSS规范包含一个实验性的:has伪选择器，它可能能够执行此操作。

li:has(a:active) {
  /* ... */
}

目前基本上不存在对此的浏览器支持，但官方规格正在考虑中。

2012年的回答在2012年是错误的，在2018年甚至是错误的

虽然CSS不能升序是正确的，但是不能抓住另一个元素的父元素是不正确的。让我重申：

使用HTML示例代码，无需指定li就可以抓住li

ul * a {
    property:value;
}

在此示例中，ul是某个元素的父级，而该元素是anchor的父级。使用此方法的缺点是，如果ul的任何子元素包含锚，则它会继承指定的样式。

您还可以使用子选择器，因为无论如何您都必须指定父元素。

ul>li a {
    property:value;
}

在此示例中，锚点必须是li的后代，后者必须是ul的子代，这意味着它必须在ul声明之后的树中。这将更加具体，将仅获取包含锚点且为ul的子项的列表项。

所以，用代码回答您的问题。

ul.menu > li a.active {
    property:value;
}

这应该抓住菜单类的ul，而子列表项仅包含活动类的锚点。

逆天Itachi 2020.03.23

根据维基百科：

选择器无法提升

CSS无法提供选择满足某些条件的元素的父项或祖先的方法。更高级的选择器方案（例如XPath）将启用更复杂的样式表。但是，CSS工作组拒绝针对父级选择器的建议的主要原因与浏览器性能和增量渲染问题有关。

对于以后搜索SO的任何人，也可以将其称为祖先选择器。

更新：

该选择器4级规格，您可以选择其中选择的部分是主题：

选择器的主题可以通过在选择器中的复合选择器之一之前加一个美元符号（$）来明确标识。尽管选择器表示的元素结构在带或不带美元符号的情况下都是相同的，但以此方式指示主题可以更改该结构中哪个复合选择器表示主题。

范例1：

例如，以下选择器表示列表项LI是有序列表OL的唯一子项：
OL > LI:only-child
但是，下一个代表具有唯一子项的有序列表OL，该子项是LI：
$OL > LI:only-child
这两个选择器表示的结构相同，但选择器的主题不同。