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

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

试试这个。。。

此解决方案使用无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根据父级的状态来设置父级的样式，因此此代码段会更改HTML，以便在输入元素后面紧跟一个空span元素。此span元素不执行任何操作，直到输入悬停在其显示自身的位置，并展开以适应与已设置位置的祖先相同的大小。这是标签本身，而不是输入。因此，边框（阴影）看起来就像是在标签上。

* {边距：0；填充：0；框大小调整：边框框；}.外部字段{显示：柔性；}.list标签{填充：8px 5px；边框：2px实心黑色；宽度：32%；保证金：1%；显示：柔性；调整内容：间距；对齐项目：居中；柔性流：行；位置：相对；}输入[type=“radio”]~span{显示：无；}input[type=“radio”]：选中/span{显示：内联块；宽度：100%；高度：100%；边框：2px纯红色；方框阴影：0 0 0 3px橙色；位置：绝对；顶部：0；左：0；}<div class=“OuterField”><label for=“List1”class=“listLabel”>列表1<input type=“radio”id=“List1”name=“list”value=“List1“><span></span></label><label for=“List2”class=“listLabel”>列表2<input type=“radio”id=“List2”name=“list”value=“List2“><span></span></label></div>

目前还没有父选择器&它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS，才能真正了解我们是否需要它。

这里有很多技术解释。

Jonathan Snook解释了如何评估CSS。

Chris Coyier谈家长选择。

Harry Roberts再次谈到了如何编写高效的CSS选择器。

但妮可·沙利文对积极趋势有一些有趣的事实。

这些人都是前端开发领域的顶级人物。

CSS选择器“General Sibling Combinator”可能用于您想要的用途：

E ~ F {
    property: value;
}

这匹配前面有E元素的任何F元素。

有什么想法吗？

如果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版本中。

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