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

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

li < a.active {
    property: value;
}

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

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


当前回答

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

E ~ F {
    property: value;
}

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

其他回答

至少包括CSS 3,你不能这样选择。但是现在用JavaScript可以很容易地完成,你只需要添加一些普通的JavaScript,注意代码很短。

cells=document.querySelectorAll('div');[].forEach.call(单元格,函数(el){//console.log(el.nodeName)如果(el.hasChildNodes()&&el.firstChild.nodeName==“A”){控制台日志(el)};});彼得</div><div><a href=“#”>Jackson链接</a></div>菲利普</div><div><a href=“#”>Pullman链接</a></div>

这是Selectors Level 4规范中讨论最多的方面。这样,选择器就可以通过在给定的选择器(!)后面使用感叹号来根据其子元素设置元素的样式。

例如:

body! a:hover{
   background: red;
}

如果用户悬停在任何锚点上,将设置红色背景色。

但我们必须等待浏览器的实现:(

尝试将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: ...
}

您可以使用以下脚本:

*! > 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中工作。

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

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