Selectors Level 4 Working Draft包含一个：has（）伪类，将提供此功能。它将类似于jQuery实现，但目前Firefox不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

截至2022年，Firefox是唯一默认不支持它的浏览器。

同时，如果需要选择完全支持跨浏览器的父元素，则必须在Firefox中使用JavaScript。

试试这个。。。

此解决方案使用无Javascript的简单CSS2规则，适用于所有浏览器，无论新旧浏览器。单击时，子锚点标记将激活其活动的伪类事件。然后，它简单地隐藏自己，允许活动事件向上冒泡到父li标签，然后父li标签重新设计自己的样式，并以新样式再次显示其锚定子对象。子对象已设置父对象的样式。

使用您的示例：

<ul>
    <li class="listitem">
        <a class="link" href="#">This is a Link</a>
    </li>
</ul>

现在，将这些样式应用于a上的活动伪类，以在单击链接时重新设置父li标记的样式：

a.link {
    display: inline-block;
    color: white;
    background-color: green;
    text-decoration: none;
    padding: 5px;
}

li.listitem {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */

a.link:active {
    display: none;
}

.listitem:active {
    background-color: blue;
}

.listitem:active a.link {
    display: inline-block;
    background-color: transparent;
}

单击时，您应该会看到带有绿色背景的链接现在变为列表项的蓝色背景。

转到

单击。

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

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:

li.active > a {
    property: value;
}

有一个插件可以扩展CSS，以包含一些非标准功能，这些功能在设计网站时非常有用。这叫做EQCSS。

EQCSS添加的内容之一是父选择器。它适用于所有浏览器，Internet Explorer 8及更高版本。格式如下：

@element 'a.active' {
  $parent {
    background: red;
  }
}

因此，我们在每个元素a.active上打开了一个元素查询，对于该查询中的样式，类似$parent这样的东西是有意义的，因为有一个参考点。浏览器可以找到父节点，因为它与JavaScript中的parentNode非常相似。

这里有一个$parent的演示和另一个在Internet Explorer 8中运行的$parent演示，以及一个屏幕截图，以防您没有Internet Explorer 8进行测试。

EQCSS还包括元选择器：$prev用于所选元素之前的元素，$this仅用于与元素查询匹配的元素，等等。