我认为你不能只在CSS中选择父级。

但由于您似乎已经有一个.active类，所以将该类移动到li（而不是a）会更容易。这样，您只能通过CSS访问li和a。

从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用jQuery或JavaScript进行排序。

然而，你也可以这样做。

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

$("a.active").parents('li').css("property", "value");

如果您想使用jQuery实现这一点，这里是jQuery父选择器的引用。

虽然目前标准CSS中没有父选择器，但我正在开发一个名为axe（即增强的CSS选择器语法/ACSSSS）的（个人）项目，该项目在其7个新选择器中包括：

一个直接的父选择器<（它允许相反的选择>）任意祖先选择器^（启用与[SPACE]相反的选择）

axe目前处于相对早期的BETA开发阶段。

请在此处查看演示：

.父级{浮动：左侧；宽度：180px；高度：180px；右边距：12px；背景色：rgb（191191191）；}.儿童{宽度：90px；高度：90px；边距：45px；填充顶部：12px；字体系列：无衬线；文本对齐：居中；字体大小：12px；背景色：rgb（255，255，0）；}child.using-axe<父级{背景色：rgb（255，0，0）；}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里，axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

在上面的示例中，<是直接父选择器，因此

child.using-axe<父级

指：

.child.uning-axe的任何直接父级，即parent

您也可以使用：

.child.using-axe<div

这意味着：

child.using-axe的任何直接父级，它是一个div

现在是2019年，CSS嵌套模块的最新草稿实际上有这样的内容。介绍@nest at规则。

3.2.嵌套规则：@nest虽然直接筑巢看起来不错，但它有点脆弱。某些有效的嵌套选择器（如.foo&）是不允许的，以某些方式编辑选择器可能会使规则意外无效。此外，一些人发现嵌套很难从视觉上与周围的声明区分开来。为了解决所有这些问题，本规范定义了@nest规则，它对如何有效地嵌套样式规则施加了较少的限制。其语法为：@nest＝@nest＜选择器＞｛＜声明列表＞｝@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; }
 */

没有父选择器；就像以前没有兄弟选择器一样。不使用这些选择器的一个很好的原因是，浏览器必须遍历元素的所有子元素，以确定是否应应用类。例如，如果您写道：

body:contains-selector(a.active) { background: red; }

然后，浏览器必须等到加载并解析完所有内容，直到</body>确定页面是否应为红色。

《为什么我们没有父选择器》一文详细解释了这一点。

有什么想法吗？

如果CSS4在向后行走时添加了一些钩子，那么它会很漂亮。在此之前，可以使用复选框和/或无线电输入来打破通常的连接方式，并且通过这种方式也允许CSS在其正常范围之外运行。。。

/*隐藏可能稍后显示的内容*/菜单_复选框_选择，.menu__checkbox _样式，.menu__隐藏{显示：无；可见性：隐藏；不透明度：0；过滤器：alpha（不透明度=0）；/*旧Microsoft不透明度*/}/*内容和样式菜单的基本样式*/.main__内容{背景色：浅灰色；颜色：黑色；}.menu__隐藏{背景色：黑色；颜色：浅灰色；/*使列表看起来不是这样_listy_*/列表样式：无；左侧填充：5px；}.menu__选项{框大小：内容框；显示：块；位置：静态；z索引：自动；}/* &#9660; - \u2630-三条线*//*.menu__trigger__selection:：之前{内容：'\2630'；显示：内联块；}*//* &#9660; - 向下箭头*/.menu__trigger__selection:：之后{内容：“\25BC”；显示：内联块；变换：旋转（90度）；}/*自定义以使其看起来更像“选择”（如果愿意）*/.menu__trigger__style:悬停，.menu__trigger__style:活动{光标：指针；背景色：深灰色；颜色：白色；}/***选中复选框/收音机时要做的事情*/.menu__checkbox_selection:选中+.menu__trigger__selection:：之后，.menu__checkbox_selection[checked]+.menu__trigger__selection:：之后{变换：旋转（0deg）；}/*这一点你可以在其他地方看到*/.menu__checkbox_selection:选中~.menu__hidden，.menu__checkbox_selection[checked]~.menu__hidden{显示：块；可见性：可见；不透明度：1；过滤器：alpha（不透明度=100）；/*Microsoft*/}/***仅基于非内联复选框的黑客CSS更改* ... AKA这之后你不能解开的东西。。。*/.menu__checkboxx_style[id=“style default”]：选中~.main__content{背景色：浅灰色；颜色：黑色；}.menu__checkboxx_style[id=“style default”]：选中~.main__content.menu__trigger__style[for=“style default”]{颜色：深橙色；}.menu__checkboxx_style[id=“style one”]：选中~.main__content{背景色：黑色；颜色：浅灰色；}.menu__checkboxx_style[id=“style one”]：选中~.main__content.menu__trigger__style[for=“style one”]{颜色：深橙色；}.menu__checkboxx_style[id=“style two”]：选中~.main__content{背景色：深绿色；颜色：红色；}.menu__checkboxx_style[id=“style two”]：选中~.main__content.menu__trigger__style[for=“style二”]{颜色：深橙色；}<!--这一点可行，但总有一天会带来麻烦，但事实是，你可以粘贴复选框/无线电输入随便找个地方，然后用身份证给他们打电话“for”标签。继续滚动查看我的意思--><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style default”><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style one”><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style two”><div class=“main__content”><p class=“paragraph__split”>Lorem ipsum dolor坐amet，consectetur adipiscing elit，sed do eiusmod暂时停止劳动和劳动。乌特海姆和最小的威尼斯，quis nostrud exerciation ullamco labours nisi ut aliquip ex ea commo</p><input-type=“checkbox”class=“menu__checkbox_selection”id=“触发器样式菜单”><label for=“触发器样式菜单”class=“menu__trigger__selection”>主题</label><ul class=“menu__hidden”><li class=“menu__option”><label for=“style default”class=“menu__trigger__style”>默认样式</label></li><li class=“menu__option”><label for=“style one”class=“menu__trigger__style”>第一替代样式</label></li><li class=“menu__option”><label for=“style two”class=“menu__trigger__style”>第二种可选样式</label></li></ul><p class=“paragraph__split”>金桔。我是一个很好的朋友cillum dolore eu fugiat nulla pariator。偶尔会发生意外proident，sunt in guma qui official disestant mollit anim is laburum。</p></div>

……相当粗鲁，但仅使用CSS和HTML，就可以通过链接id和radio/checkbox输入和标签触发器的财产，从几乎任何地方接触和重新接触任何东西，除了正文和：root；很可能有人会在某个时候展示如何重新触摸这些。

一个额外的警告是，只能使用特定id的一个输入，第一个复选框/单选框将赢得切换状态，换句话说。。。但是多个标签都可以指向同一个输入，尽管这会使HTML和CSS看起来更恶心。

…我希望有某种变通方法可以在CSS Level 2中使用。。。

我不确定其他伪类，但我检查了CSS3之前的版本。如果我没记错的话，它类似于[checked]，这就是为什么你可以在上面的代码中找到它，例如，

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

…但对于像：：after和：hover这样的东西，我完全不确定它们最初出现在哪个CSS版本中。

所有这些都表明，请不要在生产中使用，甚至不要在愤怒中使用。作为一个玩笑，或者换句话说，仅仅因为某件事可以做，并不总是意味着它应该做。