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

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

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;
}

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

转到

单击。

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

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

简短的回答是“否”；在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;

更新2022 CSS选择器4

在CSS Selectors 4规范中，CSS引入了一个名为：has（）的新选择器，它最终允许我们选择父级。这意味着我们将能够针对一个包含特定子元素的CSS元素。这在Safari和Chrome105中都已得到支持。显示完整的支撑台在这里

父选择器工作

在CSS中，如果我们想选择一些东西，我们使用DOM下面的选择器。

例如，在div标记中选择p标记如下所示：

 div p {
   color: red;
}

不过，到目前为止，我们还无法真正选择其中包含p标记的div标记，这意味着我们不得不求助于Javascript。没有在CSS中实现这一点的主要原因是，这是一个相当昂贵的操作。CSS解析速度相对较快，但选择父标记需要相对较大的处理量。

使用：has选择器，我们现在可以选择具有p子级的div元素，或选择器的任何正常组合。

例如，选择带有子p的div现在看起来像这样：

div:has(p) {
  color: red;
}

这将使任何带有子p的div变为红色。

将父选择与其他选择器组合

就像任何其他CSS选择器一样，我们可以针对特定情况组合这些选择器。例如，如果只选择具有直接span子级的div标记：

div:has(> span) {
  color: red;
}

正如：的词汇所暗示的，它不仅仅局限于父母的选择。

例如，下面我们可以选择一个span，该span：有一个同级div：

span:has(+ div) {
color: red;
}

甚至，通过使用：not（）选择器选择一个没有子元素的元素。

例如，下面将选择任何没有p子级的div：

div:not(:has(p)) {
 color: red;
}

选择仅包含CSS中文本的元素

CSS中一个非常常见的问题是：empty标记不选择包含任何文本的元素，因此有时元素可以包含一个空格，而：empty将不适用。has选择器使我们能够选择只包含文本节点而不包含其他子元素的元素。

虽然这并不是简单的空元素和空格的完美解决方案（因为这将选择任何只包含文本的元素，而不包含额外的HTML DOM元素），但它确实让我们能够选择只包含文本节点的DOM元素，这在以前是不可能的。我们可以通过以下代码实现这一点：

div:not(:has(*)) {
  background: green;
}