如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
Selectors Level 4 Working Draft包含一个：has（）伪类，将提供此功能。它将类似于jQuery实现，但目前Firefox不支持。
li:has(> a.active) { /* styles to apply to the li tag */ }
截至2022年，Firefox是唯一默认不支持它的浏览器。
同时，如果需要选择完全支持跨浏览器的父元素，则必须在Firefox中使用JavaScript。
其他回答
您可以使用以下脚本：
*! > 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中工作。
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
这是Selectors Level 4规范中讨论最多的方面。这样，选择器就可以通过在给定的选择器（！）后面使用感叹号来根据其子元素设置元素的样式。
例如：
body! a:hover{
background: red;
}
如果用户悬停在任何锚点上，将设置红色背景色。
但我们必须等待浏览器的实现：(
下面是一个使用悬停指针事件的黑客：
<!doctype html><html><head><title></title><style>/*附件*/.父级{宽度：200px；高度：200px；背景：灰色；}父母亲.选择器{显示：柔性；对齐内容：中心；对齐项目：居中；}.选择器{光标：指针；背景：银色；宽度：50%；高度：50%；}</style><style>/*相关的*/.父级{背景：灰色；指针事件：无；}.parent:悬停{背景：紫红色；}父母亲.选择器{指针事件：自动；}</style></head><body><div class=“parent”><div class=“selector”></div></div></body></html>
更新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;
}
