活动子的父级复杂CSS选择器

Question

活动子的父级复杂CSS选择器是否有一种方法可以根据类中子元素的类来选择父元素？与我相关的与HTML输出相关的示例，该示例由一个不错的菜单插件提供http://drupal.org..输出呈现如下所示：<ul class="menu">       <li>           <a class="active">Active Page</a>       </li>       <li>             <a>Some Other Page</a>       </li>  </ul>我的问题是，是否可以将样式应用到包含有活动类的锚点的列表项中。显然，我倾向于将列表项标记为活动项，但我无法控制生成的代码。我可以使用javascript(JQuery Spring)来执行这类事情，但我想知道是否有一种使用CSS选择器的方法。为了明确起见，我想将样式应用于列表项，而不是锚点。

Answer 1

不幸的是，CSS无法做到这一点。

不过，使用JavaScript并不难：

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

Answer 2

根据维基百科:

选择者无法提升

CSS无法选择满足特定条件的元素的父或祖先。更高级的选择器方案(如XPath)将启用更复杂的样式表。然而，CSS工作组拒绝父选择器建议的主要原因是浏览器性能和增量呈现问题。

对于将来搜索的人来说，这也可能被称为祖先选择器。

最新情况：

这个4级选择器允许您选择的哪一部分为主题：

选择器的主体可以通过在选择器中的一个复合选择器前加上美元符号($)来显式标识。尽管选择器所表示的元素结构与美元符号或不带美元符号的元素结构相同，但以这种方式指示主题可以更改在该结构中代表主题的复合选择器。

例1：

例如，以下选择器表示有序列表OL的列表项LI唯一子项：

OL > LI:only-child

然而，下面的一个表示一个有序列表OL有一个独特的孩子，那个孩子是一个Li：

$OL > LI:only-child

这两个选择器所代表的结构是相同的，但选择器的主体不是。

尽管在任何浏览器中(目前是2011年11月)或jQuery中都没有这样的选择器。