如何选择作为锚元素的直接父元素的<li>元素?

例如,我的CSS应该是这样的:

li < a.active {
    property: value;
}

很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。

我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。


当前回答

您可以使用以下脚本:

*! > 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父选择器(也称为:has()选择器)终于在Safari TP 137中落地。该功能目前也在Chrome中实现。(MDN文档)

父级选择是通过伪类:has()完成的。例如,div:hhas(>.child)将选择具有子类的子级的所有<div>元素。

其他示例:

选择元素的直接父级

<div>
  <p>Child Element</p>
</div>
div:has(> p)

选择元素的所有父级

<div id="grandparent">
      <div id="parent">
            <div id="child"></div>
      <div>
</div>

以下选择器将同时选择祖父母和父母

div:has(.child)

您还可以将其用于嵌套选择器,甚至用于其他伪类:

div:has(> :nth-child(10))

可以使用其他有效的CSS运算符自定义查询。

密切关注caniuse.com/css-has的浏览器兼容性。

在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:

li.active > a {
    property: value;
}

Selectors Level 4 Working Draft包含一个:has()伪类,将提供此功能。它将类似于jQuery实现,但目前Firefox不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

截至2022年,Firefox是唯一默认不支持它的浏览器。

同时,如果需要选择完全支持跨浏览器的父元素,则必须在Firefox中使用JavaScript。

尝试将a切换为块显示,然后使用所需的任何样式。a元素将填充li元素,您可以根据需要修改其外观。不要忘记将li padding设置为0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

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

E ~ F {
    property: value;
}

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