活动子项父项的复杂CSS选择器[重复]
本文翻译自：Complex CSS selector for parent of active child [duplicate]
This question already has an answer here: 这个问题在这里已有答案：
- Is there a CSS parent selector? 有一个CSS父选择器吗？ 31 answers 31个答案
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 . 与我相关的示例与http://drupal.org的精美菜单插件的HTML输出相关。 The output renders like this: 输出呈现如下：
<ul class="menu">
<li>
<a class="active">Active Page</a>
</li>
<li>
<a>Some Other Page</a>
</li>
</ul>
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. 我可以使用javascript（JQuery spring to mind）执行此类操作，但我想知道是否有使用CSS选择器的方法。
Just to be clear, I want to apply a style to the list item, not the anchor. 为了清楚起见，我想将一个样式应用于列表项，而不是锚。
#1楼
参考：https://stackoom.com/question/Bhs/活动子项父项的复杂CSS选择器-重复
#2楼
Future answer with CSS4 selectors CSS4选择器的未来答案
New CSS Specs contain an experimental :has pseudo selector that might be able to do this thing. 新的CSS规范包含一个实验:has伪选择器，可能能够做到这一点。
li:has(a:active) {
/* ... */
}
The browser support on this is basically non-existent at this time, but it is in consideration on the official specs . 此时浏览器支持基本上不存在，但它在官方规范中考虑。
Answer in 2012 that was wrong in 2012 and is even more wrong in 2018 在2012年回答2012年的错误，2018年更加错误
While it is true that CSS cannot ASCEND, it is incorrect that you cannot grab the parent element of another element. 虽然CSS不能ASCEND，但是你不能抓住另一个元素的父元素是不正确的。 Let me reiterate: 让我重申一下：
Using your HTML example code, you are able to grab the li without specifying li 使用HTML示例代码，您可以在不指定li的情况下获取li
ul * a {
property:value;
}
In this example, the ul is the parent of some element and that element is the parent of anchor. 在此示例中，ul是某个元素的父元素，该元素是锚点的父元素。 The downside of using this method is that if there is a ul with any child element that contains an anchor, it inherits the styles specified. 使用此方法的缺点是，如果存在包含锚的任何子元素的ul，则它将继承指定的样式。
You may also use the child selector as well since you'll have to specify the parent element anyway. 您也可以使用子选择器，因为您无论如何都必须指定父元素。
ul>li a {
property:value;
}
In this example, the anchor must be a descendant of an li that MUST be a child of ul, meaning it must be within the tree following the ul declaration. 在这个例子中，锚必须是li的后代，它必须是ul的子元素，这意味着它必须在ul声明之后的树中。 This is going to be a bit more specific and will only grab a list item that contains an anchor AND is a child of ul. 这将更加具体，并且只会获取包含锚点的列表项并且是ul的子级。
SO, to answer your question by code. 那么，通过代码回答你的问题。
ul.menu > li a.active {
property:value;
}
This should grab the ul with the class of menu, and the child list item that contains only an anchor with the class of active. 这应该使用菜单类获取ul，并且子列表项仅包含具有活动类的锚。
#3楼
THE “PARENT” SELECTOR “父母”选择者
Right now, there is no option to select the parent of an element in CSS (not even CSS3). 现在，没有选择在CSS中选择元素的父元素（甚至不是CSS3）。 But with CSS4 , the most important news in the current W3C draft is the support for the parent selector. 但是对于CSS4 ，当前W3C草案中最重要的新闻是对父选择器的支持。
$ul li:hover{
background: #fff;
}
Using the above, when hovering an list element, the whole unordered list will be highlighted by adding a white background to it. 使用上面的内容，当悬停列表元素时，将通过向其添加白色背景来突出显示整个无序列表。
Official documentation: https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (last row). 官方文件： https ： //www.w3.org/TR/2011/WD-selectors4-20110929/#overview （最后一行）。
#4楼
许多人回答jQuery父，但只是为了补充，我想分享一个快速的代码片段，我用它来添加类到我的导航，所以我可以添加样式到li的只有子菜单而不是li没有。
$("li ul").parent().addClass('has-sub');
#5楼
Late to the party again but for what it's worth it is possible using jQuery to be a little more succinct. 迟到了派对，但是为了它的价值，可以使用jQuery更简洁一些。 In my case I needed to find the <ul> parent tag for a <span> tag contained in the child <li> . 在我的情况下，我需要找到包含在子<li>中的<span>标记的<ul>父标记。 jQuery has the :has selector so it's possible to identify a parent by the children it contains (updated per @Afrowave's comment ref: https://api.jquery.com/has-selector/ ): jQuery具有:has选择器，因此可以通过它包含的子节点识别父节点（根据@ Afrowave的注释ref： https ：//api.jquery.com/has-selector/更新）：
$("ul").has("#someId")
will select the ul element that has a child element with id someId . 将选择具有id为someId的子元素的ul元素。 Or to answer the original question, something like the following should do the trick (untested): 或者回答原始问题，类似下面的内容应该可以做到（未经测试）：
$("li").has(".active")
#6楼
Unfortunately, there's no way to do that with CSS. 不幸的是，没有办法用CSS做到这一点。
It's not very difficult with JavaScript though: 但是使用JavaScript并不是很困难：
// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;
// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.