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

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

li < a.active {
    property: value;
}

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

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


当前回答

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

这样,您可以根据父元素的滚动来更改多个内部标记中的样式。

其他回答

基于子元素更改父元素当前只能在父元素中有<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>

您可以使用以下脚本:

*! > 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根据父级的状态来设置父级的样式,因此此代码段会更改HTML,以便在输入元素后面紧跟一个空span元素。此span元素不执行任何操作,直到输入悬停在其显示自身的位置,并展开以适应与已设置位置的祖先相同的大小。这是标签本身,而不是输入。因此,边框(阴影)看起来就像是在标签上。

* {边距:0;填充:0;框大小调整:边框框;}.外部字段{显示:柔性;}.list标签{填充:8px 5px;边框:2px实心黑色;宽度:32%;保证金:1%;显示:柔性;调整内容:间距;对齐项目:居中;柔性流:行;位置:相对;}输入[type=“radio”]~span{显示:无;}input[type=“radio”]:选中/span{显示:内联块;宽度:100%;高度:100%;边框:2px纯红色;方框阴影:0 0 0 3px橙色;位置:绝对;顶部:0;左:0;}<div class=“OuterField”><label for=“List1”class=“listLabel”>列表1<input type=“radio”id=“List1”name=“list”value=“List1“><span></span></label><label for=“List2”class=“listLabel”>列表2<input type=“radio”id=“List2”name=“list”value=“List2“><span></span></label></div>

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

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

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

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

可以使用:has()CSS伪类

但它的浏览器支持有限(目前只有Chrome/Edge/Safari)。