如何选择<li>锚元素的直接父元素？
例如，我的CSS如下所示：
li < a.active {
property: value;
}
显然，可以使用JavaScript进行此操作，但是我希望CSS Level 2本身具有某种解决方法。
我尝试设置样式的菜单已由CMS弹出，因此我无法将活动元素移动到<li>元素...（除非我将菜单创建模块作为主题，但我不希望这样做）。
有任何想法吗？
是否有CSS父选择器？
第1415篇《是否有CSS父选择器？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共23个回答
Sass中的＆符是可能的：
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20px
CSS输出：
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
当前只有<input>在父元素内有一个元素时，才可以基于子元素更改父元素。当输入获得焦点时，其相应的父元素会受到CSS的影响。
以下示例将帮助您了解:focus-within在CSS中的使用。
.outer-div {
width: 400px;
height: 400px;
padding: 50px;
float: left
}
.outer-div:focus-within {
background: red;
}
.inner-div {
width: 200px;
height: 200px;
float: left;
background: yellow;
padding: 50px;
}<div class="outer-div">
<div class="inner-div">
I want to change outer-div(Background color) class based on inner-div. Is it possible?
<input type="text" placeholder="Name" />
</div>
</div>不，您不能仅在CSS中选择父项。
但是，由于您似乎已经有了一个.active类，因此将该类移到li（而不是a）会更容易。这样，您就只能通过CSS 访问li和和a。
尽管目前标准CSS中没有父选择器，但我正在开发一个名为ax（即CSS增强选择器语法/ ACSSSS）的（个人）项目，该项目在其7个新选择器中包括：
- 一个直接父选择器
<（这使得相对精选>） - 的任何祖先选择器
^（这使得相对精选[SPACE]）
斧头目前处于BETA的相对早期开发阶段。
在此处查看演示：
http://rounin.co.uk/projects/axe/axe2.html
（比较左侧使用标准选择器样式的两个列表和右侧使用斧形选择器样式的两个列表）
至少不能包括CSS 3那样选择。但是，如今使用JavaScript可以很容易地做到这一点，您只需要添加一些普通的JavaScript，请注意代码很短。
cells = document.querySelectorAll('div');
[].forEach.call(cells, function (el) {
//console.log(el.nodeName)
if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
console.log(el)
};
});<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>W3C排除了这样的选择器，因为它会对浏览器产生巨大的性能影响。
现在是2019年，CSS嵌套模块的最新草案实际上就是这样。介绍@nest规则。
3.2。嵌套规则：@nest
虽然直接嵌套看起来不错，但它有些脆弱。不允许使用某些有效的嵌套选择器，例如.foo＆，并且以某些方式编辑选择器会使规则意外无效。同样，有些人发现嵌套很难在视觉上与周围的声明区分开。
为了解决所有这些问题，此规范定义了@nest规则，该规则对如何有效嵌套样式规则施加了较少的限制。其语法为：
@nest = @nest <selector> { <declaration-list> }@nest规则的功能与样式规则相同：它以选择器开头，并包含适用于选择器匹配的元素的声明。唯一的区别是@nest规则中使用的选择器必须包含嵌套，这意味着它在某个位置包含嵌套选择器。如果所有选择器的所有单个复杂选择器都包含嵌套，则选择器列表包含嵌套。
（从上面的URL复制并粘贴）。
此规范下的有效选择器示例：
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* Equivalent to:
.foo { color: red; }
:not(.foo) { color: blue; }
*/
这是pointer-events与一起使用的技巧hover：
<!doctype html>
<html>
<head>
<title></title>
<style>
/* accessory */
.parent {
width: 200px;
height: 200px;
background: gray;
}
.parent,
.selector {
display: flex;
justify-content: center;
align-items: center;
}
.selector {
cursor: pointer;
background: silver;
width: 50%;
height: 50%;
}
</style>
<style>
/* pertinent */
.parent {
background: gray;
pointer-events: none;
}
.parent:hover {
background: fuchsia;
}
.parent
.selector {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="selector"></div>
</div>
</body>
</html>当前没有父选择器，并且W3C的任何讨论中都没有讨论它。您需要了解浏览器如何评估CSS，才能真正了解我们是否需要它。
这里有很多技术说明。
克里斯·科耶尔（Chris Coyier）在家长选择者的谈话中。
哈里·罗伯茨（Harry Roberts）再次致力于编写高效的CSS选择器。
但是妮可•沙利文（Nicole Sullivan）对于积极趋势有一些有趣的事实。
这些人都是前端开发领域中的顶级人才。
您可能尝试使用超链接作为父级，然后在悬停时更改内部元素。像这样：
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}
这样，您可以根据父元素的翻转，在多个内部标签中更改样式。
:focus-within如果后代具有焦点，则伪元素允许选择父对象。
如果元素具有tabindex属性，则可以将其聚焦。
例
.click {
cursor: pointer;
}
.color:focus-within .change {
color: red;
}
.color:focus-within p {
outline: 0;
}<div class="color">
<p class="change" tabindex="0">
I will change color
</p>
<p class="click" tabindex="1">
Click me
</p>
</div>据我所知，CSS 2中还没有。CSS 3具有更强大的选择器，但并非在所有浏览器中都一致实现。即使使用改进的选择器，我也不认为它会完全实现您在示例中指定的功能。
这是选择器4级规范中讨论最多的方面。这样，选择器将能够通过在给定选择器（！）之后使用感叹号来根据元素的子元素来设置样式。
例如：
body! a:hover{
background: red;
}
如果用户将鼠标悬停在任何锚点上，它将设置红色的背景色。
但是我们必须等待浏览器的实现:(
尝试切换a到block显示，然后使用所需的任何样式。该a元素将填充该li元素，您将能够根据需要修改其外观。不要忘记将lipadding 设置为0。
li {
padding: 0;
overflow: hidden;
}
a {
display: block;
width: 100%;
color: ..., background: ..., border-radius: ..., etc...
}
a.active {
color: ..., background: ...
}
我知道OP一直在寻找CSS解决方案，但是使用jQuery很容易实现。就我而言，我需要为子级中包含<ul>的<span>标签找到父级标签<li>。jQuery具有:has选择器，因此可以通过其包含的子代来标识父代：
$("ul:has(#someId)")
将选择ul具有id为someId的子元素的元素。或回答原始问题，应使用以下方法解决问题（未测试）：
$("li:has(.active)")
CSS 2无法执行此操作。您可以将类添加到li并引用a：
li.active > a {
property: value;
}
没有父选择器。就像以前没有同级选择器一样。没有这些选择器的一个很好的理由是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果您写了：
body:contains-selector(a.active) { background: red; }
然后，浏览器将不得不等待，直到加载并解析了所有内容为止，直到</body>确定页面是否应为红色为止。
为什么我们没有父选择器的文章对此做了详细说明。
I don’t think you can select the parent in CSS only.
但是，由于您似乎已经有了一个.active类，因此将该类移到li（而不是a）会更容易。这样，您就只能通过CSS 访问li和和a。
当前无法在CSS中选择元素的父级。
如果有办法，可以在当前的CSS选择器规范中使用：
同时，如果需要选择父元素，则必须使用JavaScript。
The Selectors Level 4 Working Draft includes a :has() pseudo-class that works the same as the jQuery implementation. As of 2019, this is still not supported by any browser.
Using :has() the original question could be solved with this:
li:has(> a.active) { /* styles to apply to the li tag */ }
您可以使用以下脚本：
*! > input[type=text] { background: #000; }
这将选择文本输入的任何父项。但是，等等，还有更多。如果需要，可以选择一个指定的父对象：
.input-wrap! > input[type=text] { background: #000; }
或在活动时选择它：
.input-wrap! > input[type=text]:focus { background: #000; }
查看以下HTML：
<div class="input-wrap">
<input type="text" class="Name"/>
<span class="help hide">Your name sir</span>
</div>
您可以span.help在input激活时选择它并显示它：
.input-wrap! .help > input[type=text]:focus { display: block; }
还有更多功能；只需查看插件的文档即可。
顺便说一句，它可以在Internet Explorer中使用。
相似问题
问题类别
由于“ CSS工作组先前拒绝父选择器的建议的主要原因与浏览器性能和增量渲染问题有关，因此没有CSS（因此在CSS预处理器中）”没有父选择器。