活动孩子的父母的复杂 CSS 选择器 [英] Complex CSS selector for parent of active child

问题描述

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

Is there a way to select a parent element based on the class of a child element in the class? The example that is relevant to me relating to HTML output by a nice menu plugin for http://drupal.org. The output renders like this:

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

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

My question is whether or not it is possible to apply a style to the list item that contains the anchor with the active class on it. Obviously, I'd prefer that the list item be marked as active, but I don't have control of the code that gets produced. I could perform this sort of thing using javascript (JQuery springs to mind), but I was wondering if there is a way to do this using CSS selectors.

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

Just to be clear, I want to apply a style to the list item, not the anchor.

推荐答案

很遗憾，CSS 无法做到这一点.

Unfortunately, there's no way to do that with CSS.

不过，使用 JavaScript 并不难:

It's not very difficult with JavaScript though:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

这篇关于活动孩子的父母的复杂 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！