如何选择作为锚元素的直接父元素的<li>元素？
例如，我的CSS应该是这样的：
li < a.active {
property: value;
}
很显然，JavaScript有很多方法可以做到这一点，但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出，因此我无法将活动元素移动到<li>元素。。。（除非我对菜单创建模块进行主题化，否则我不想这样做）。
当前回答
下面是一个使用悬停指针事件的黑客：
<!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>
其他回答
CSS选择器“General Sibling Combinator”可能用于您想要的用途：
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
基于子元素更改父元素当前只能在父元素中有＜input＞元素时发生。当输入获得焦点时，其对应的父元素可能会使用CSS受到影响。
以下示例将帮助您理解在CSS中使用：focus in。
.外部div{宽度：400px；高度：400px；填充：50px；浮动：左侧}.outer div：聚焦在{背景：红色；}.内部div{宽度：200px；高度：200px；浮动：左侧；背景：黄色；填充：50px；}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div（背景色）类。有可能吗？<input type=“text”placeholder=“Name”/></div></div>
有一个插件可以扩展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仅用于与元素查询匹配的元素，等等。
现在是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; }
*/
