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

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

li < a.active {
    property: value;
}

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

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


当前回答

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

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

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

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

其他回答

下面是一个使用悬停指针事件的黑客:

<!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>

只是一个水平菜单的想法。。。

HTML的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS的一部分

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

更新的演示和其余代码

另一个示例是如何将其用于文本输入-选择父字段集

W3C排除了这种选择器,因为它会对浏览器产生巨大的性能影响。

您可以使用以下脚本:

*! > 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中没有。CSS 3具有更强大的选择器,但并不是在所有浏览器中都一致实现。即使有了改进的选择器,我也不相信它能完全实现您在示例中指定的功能。