尝试将a切换为块显示，然后使用所需的任何样式。a元素将填充li元素，您可以根据需要修改其外观。不要忘记将li padding设置为0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

我知道OP正在寻找CSS解决方案，但使用jQuery很容易实现。在我的例子中，我需要为包含在子<li>中的<span>标记找到<ul>父标记。jQuery具有：has选择器，因此可以通过它包含的子项来标识父项：

$("ul:has(#someId)")

将选择具有id为someId的子元素的ul元素。或者，为了回答最初的问题，应该使用以下方法（未经测试）：

$("li:has(.active)")

您可以使用以下脚本：

*! > 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-wrap! .help > input[type=text]:focus { display: block; }

还有更多的功能；只需查看插件的文档即可。

顺便说一下，它在Internet Explorer中工作。

现在是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; }
 */

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

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

您可以尝试使用超链接作为父级，然后在悬停时更改内部元素。这样地：

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

这样，您可以根据父元素的滚动来更改多个内部标记中的样式。