css-selectors - 有没有CSS父选择器?

  显示原文与译文双语对照的内容

根据锚点标记的某些属性,我想选择 <li> 元素作为父( 如果有帮助的话,它紧跟在锚标记之前。) 。

i.e 。我的CSS将是这样的:


li <a.active {
 property: value;
}

显然,有一些方法可以使用JavaScript来实现这一点,但我希望有一些针对 CSS 2原生的变通方法。

我正在尝试的菜单正被一个CMS流出,所以我无法将活动标记移动到 <li> 元素。。 ( 除非我在创建菜单创建模块时不做)

有什么想法吗?

时间:

目前没有办法在CSS中选择元素的父元素。

如果有方法可以做到的话,它可能是当前CSS选择器的规范之一:

同时,如果你需要选择一个父元素,则必须求助于 JavaScript 。


选择器级别 4工作草案包含一个与 jQuery实现相同的:has() pseudo-class 。 在任何浏览器中,截至 2015,这是现在没有空。

使用 :has() 可以通过以下方法解决原始问题:


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

这样你就可以通过css访问 lia

你可以使用这里脚本


*!> 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.helpinput 处于活动状态并显示它:


.input-wrap!. help> input[type=text]:focus { display: block; }

还有很多功能;只需查看插件的文档。

顺便说一下,它在 IE 中工作。

这次新 ,如上所述通过一对没有别人,有一种方法来样式将父元素仅使用 CSS/s,但以下 works:


$("a.active").parents('li').css("property","value");

css3选择器"常规同级组合器"可以用于你想要的内容:


E ~ F {
 property: value;
}

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

我的确遇到过一些实例,当它很方便,但是不幸的是,父选择器并不在CSS中。

你能解释更多你想要达到的目的? 可能还有另一种方法,比如 将样式移动到 li,然后在 a.active 或者通过子选择器禁用它。

尝试 switch"一个"以阻止显示,然后使用任何你想要的样式。 "一个"元素将填充"li"元素,你可以修改它的外观。 不要忘记将"li"留空设置为 0.


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

你可以尝试使用超链接作为父级,然后在悬停时更改内部元素。 就像这个:


a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

这样,你可以根据父元素的翻转,在多个内部标记中更改样式。

...