虽然目前标准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

这是对一个类似（但我感觉不是完全相同）问题的回答，该问题已被关闭，支持这个问题，所以我在这里回答了如何在检查输入时更改边框颜色。

由于不可能使用纯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>

据我所知，CSS 2中没有。CSS 3具有更强大的选择器，但并不是在所有浏览器中都一致实现。即使有了改进的选择器，我也不相信它能完全实现您在示例中指定的功能。

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

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

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

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

试试这个。。。

此解决方案使用无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;
}

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

转到

单击。

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

然而，你也可以这样做。

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

jQuery

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

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