Answers:
当前无法在CSS中选择元素的父级。
如果有办法，可以在当前的CSS选择器规范中使用：
也就是说，选择器第4级工作草案包含一个:has()伪类，它将提供此功能。它将类似于jQuery实现。
li:has(> a.active) { /* styles to apply to the li tag */ }但是，截至2020年5月，任何浏览器仍不支持此功能。
同时，如果需要选择父元素，则必须使用JavaScript。
$对我来说看起来更好...附加的!可以更容易被忽略。
:has()jQuery伪造的伪代码取代了所有人，这一点已广为人知。最新的ED删除了对主题指示符的所有引用，并将其替换为:has()伪标识。我不知道确切的原因，但是CSSWG早前进行了一项民意调查，其结果肯定影响了这一决定。它最有可能与jQuery兼容（因此它无需修改即可利用qSA），并且因为主题指示符语法过于混乱。
我认为您只能在CSS中选择父级。
但是，因为您似乎已经有了一个.active类，所以将该类移到li（而不是a）会更容易。这样，您就只能通过CSS 访问li和和a。
您可以使用以下脚本：
*! > 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中使用。
patent()会更快。但是，这需要测试
#a!仅引发错误，#a! p可以工作），因此其他原因也将不起作用，原因是Uncaught TypeError: Cannot call method 'split' of undefined：请参见jsfiddle.net/HerrSerker/VkVPs
正如其他一些人提到的那样，没有一种仅使用CSS样式化元素父元素的方法，但是以下方法可用于jQuery：
$("a.active").parents('li').css("property", "value");<选择不存在（使用jQuery 1.7.1验证）。
<-syntax在2009年有效，但我已经对其进行了更新（针对2013年）。
:has()选择器：$("li:has(a.active)").css("property", "value");。它的读取方式与CSS 4建议的!选择器类似。另请参见：:parent选择器，.parents()方法，.parent()方法。
没有父选择器。就像以前没有同级选择器一样。没有这些选择器的一个很好的理由是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果您写了：
body:contains-selector(a.active) { background: red; }然后，浏览器将不得不等待，直到它加载并解析了所有内容为止，直到</body>确定该页面是否应为红色为止。
为什么我们没有父选择器的文章对此做了详细说明。
我知道OP正在寻找CSS解决方案，但使用jQuery即可轻松实现。就我而言，我需要为子级中包含<ul>的<span>标签找到父级标签<li>。jQuery具有:has选择器，因此可以通过其包含的子代来标识父代：
$("ul:has(#someId)")将选择ul具有id为someId的子元素的元素。或回答原始问题，以下方法应可解决（未测试）：
$("li:has(.active)")$yourSpan.closest("ul")，您将获得span元素的父UL。但是，您的答案完全是题外之词。我们可以使用jQuery解决方案来回答所有带有CSS标签的问题。
: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>.color:focus-within .change为.color:focus-within。在我的情况下，我正在使用引导导航栏，该导航栏在活动时将其添加到子级，而我想向父.nav-bar添加一个类。我认为这是一个很常见的场景，我拥有标记，但是组件css + js是bootstrap（或其他），因此我无法更改行为。虽然我可以添加tabindex并使用此CSS。谢谢！
这是选择器4级规范中讨论最多的方面。这样，选择器将能够通过在给定选择器（！）之后使用感叹号来根据元素的子元素设置样式。
例如：
body! a:hover{
background: red;
}如果用户将鼠标悬停在任何锚点上，它将设置红色背景色。
但是我们必须等待浏览器的实现:(
您可以尝试将超链接用作父级，然后在悬停时更改内部元素。像这样：
a.active h1 {color:red;}
a.active:hover h1 {color:green;}
a.active h2 {color:blue;}
a.active:hover h1 {color:yellow;}这样，您可以根据父元素的翻转，在多个内部标签中更改样式。
a如果您要符合XHTML标准，则将标记内的标记代码仅限于某些元素。例如，您不能使用一个div内部a，而不会收到违反该模式的警告。
当前没有父选择器，并且W3C的任何讨论中都没有讨论它。您需要了解浏览器如何评估CSS，以实际了解我们是否需要它。
这里有很多技术说明。
克里斯·科耶尔（Chris Coyier）在家长选择者的会谈中。
哈里·罗伯茨（Harry Roberts）再次着手编写高效的CSS选择器。
但是妮可·沙利文（Nicole Sullivan）在积极趋势方面有一些有趣的事实。
这些人都是前端开发领域中的顶级人才。
need由Web开发人员的需求定义，是有它的规范是由其他因素决定。
只是水平菜单的一个主意...
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>CSS的一部分
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }这是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>有一个扩展CSS的插件，其中包括一些非标准功能，这些功能在设计网站时可以真正提供帮助。它称为EQCSS。
EQCSS添加的一件事是父选择器。它适用于所有浏览器，Internet Explorer 8及更高版本。格式如下：
@element 'a.active' {
$parent {
background: red;
}
}因此，这里我们在每个元素上都打开了一个元素查询a.active，对于该查询中的样式，这$parent很有意义，因为有一个参考点。浏览器可以找到父对象，因为它与parentNode JavaScript。
这是一个$parentInternet Explorer 8 的演示和另一个$parent演示，还提供了一个截图，以防您没有Internet Explorer 8可以进行测试。
EQCSS还包括元选择器：$prev用于选定元素之前的元素，$this以及仅与元素查询匹配的那些元素，以及更多其他元素。
现在是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; }
*/从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用jQuery或JavaScript进行分类。
但是，您也可以执行类似的操作。
a.active h1 {color: blue;}
a.active p {color: green;}jQuery的
$("a.active").parents('li').css("property", "value");如果要使用jQuery实现此目的，则这里是jQuery父选择器的参考。
W3C排除了这样的选择器，因为它会对浏览器产生巨大的性能影响。
简短的回答是NO ; 我们parent selector在CSS的现阶段还没有，但是如果您不必交换元素或类，第二个选择是使用JavaScript。像这样：
var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));
activeATag.map(function(x) {
if(x.parentNode.tagName === 'LI') {
x.parentNode.style.color = 'red'; // Your property: value;
}
});如果您在应用程序中使用jQuery，则可以使用更短的方法：
$('a.active').parents('li').css('color', 'red'); // Your property: value;尽管目前标准CSS中没有父选择器，但我正在一个名为ax（即CSS增强选择器语法/ ACSSSS）的（个人）项目中工作，该项目在其7个新选择器中包括：
<（这使得相对精选>）^（这使得相对精选[SPACE]）斧头目前处于相对较新的测试版开发阶段。
在此处查看演示：
http://rounin.co.uk/projects/axe/axe2.html
（比较左侧使用标准选择器样式的两个列表和右侧使用斧形选择器样式的两个列表）
<script src="https://rouninmedia.github.io/axe/axe.js"></script>在html文档的末尾（在之前）添加CSS样式的ax选择器</body>。
至少您不能选择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>有任何想法吗？
CSS 4将被看中，如果它增加了一些挂钩到倒着走。在那之前它是可能的（虽然不建议）使用checkbox和/或radio inputS ^来打破，事情是连接通常的方式，并通过也让CSS到正常范围之外的业务遍及全球...
/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0); /* Old Microsoft opacity */
}
/* Base style for content and style menu */
.main__content {
background-color: lightgray;
color: black;
}
.menu__hidden {
background-color: black;
color: lightgray;
/* Make list look not so _listy_ */
list-style: none;
padding-left: 5px;
}
.menu__option {
box-sizing: content-box;
display: block;
position: static;
z-index: auto;
}
/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
content: '\2630';
display: inline-block;
}
*/
/* ▼ - Down Arrow */
.menu__trigger__selection::after {
content: "\25BC";
display: inline-block;
transform: rotate(90deg);
}
/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
cursor: pointer;
background-color: darkgray;
color: white;
}
/**
* Things to do when checkboxes/radios are checked
*/
.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
transform: rotate(0deg);
}
/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100); /* Microsoft!? */
}
/**
* Hacky CSS only changes based off non-inline checkboxes
* ... AKA the stuff you cannot unsee after this...
*/
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
background-color: lightgray;
color: black;
}
.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
color: darkorange;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
background-color: black;
color: lightgray;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
color: darkorange;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
background-color: darkgreen;
color: red;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
color: darkorange;
}<!--
This bit works, but will one day cause troubles,
but truth is you can stick checkbox/radio inputs
just about anywhere and then call them by id with
a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-default">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-one">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-two">
<div class="main__content">
<p class="paragraph__split">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<input type="checkbox"
class="menu__checkbox__selection"
id="trigger-style-menu">
<label for="trigger-style-menu"
class="menu__trigger__selection"> Theme</label>
<ul class="menu__hidden">
<li class="menu__option">
<label for="style-default"
class="menu__trigger__style">Default Style</label>
</li>
<li class="menu__option">
<label for="style-one"
class="menu__trigger__style">First Alternative Style</label>
</li>
<li class="menu__option">
<label for="style-two"
class="menu__trigger__style">Second Alternative Style</label>
</li>
</ul>
<p class="paragraph__split">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>...相当粗略，但是只要使用CSS和HTML，就可以通过链接/ s和触发器的and 属性，在几乎任何地方触摸和重新触摸除the body和之外的任何东西；可能有人会在某个时候展示如何重新修饰它们。:rootidforradiocheckbox inputlabel
另外一个需要注意的是，只有一个
input特定的id可能使用，第一checkbox/radio胜换句话说，一个切换状态...... 但多个标签都可以指向相同的input，尽管这将使HTML和CSS的外观甚至阴暗面。
...我希望CSS Level 2本身有某种解决方法...
我不确定其他:选择器，但是我:checked使用的是CSS 3之前的版本。如果我没记错的话，[checked]这就是为什么您可以在上面的代码中找到它的原因，例如，
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
/* rules: and-stuff; */
}...但是对于诸如::after和这类东西:hover，我完全不确定那些最初出现在哪个CSS版本中。
综上所述，请不要在生产中使用它，甚至不要生气。开个玩笑，或者仅仅因为可以做某事并不总是意味着应该做。
不，您不能仅在CSS中选择父项。
但是，因为您似乎已经有了一个.active类，所以将该类移到li（而不是a）会更容易。这样，您就只能通过CSS 访问li和和a。
当前只有<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>Sass中的＆符是可能的：
h3
font-size: 20px
margin-bottom: 10px
.some-parent-selector &
font-size: 24px
margin-bottom: 20pxCSS输出：
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}h3的母公司，这是目标。这将选择h3的后代.some-parent-selector。
由于“ CSS工作组先前拒绝父选择器的建议的主要原因与浏览器性能和增量渲染问题有关，因此没有CSS（因此在CSS预处理器中）”没有父选择器。