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

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

li < a.active {
    property: value;
}

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

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


当前回答

这是对一个类似(但我感觉不是完全相同)问题的回答,该问题已被关闭,支持这个问题,所以我在这里回答了如何在检查输入时更改边框颜色。

由于不可能使用纯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>

其他回答

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

从技术上讲,没有直接的方法可以做到这一点。但是,您可以使用jQuery或JavaScript进行排序。

然而,你也可以这样做。

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

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

如果您想使用jQuery实现这一点,这里是jQuery父选择器的引用。

如果子代具有焦点,则内的伪元素:focus允许选择父代。

如果元素具有tabindex属性,则可以聚焦该元素。

浏览器支持

标签索引

实例

.parent:焦点在{背景:hsl(199deg,65%,73%);}/*演示样式*/正文{边距:0;}.父级{背景:hsl(0,0%,80%);最小高度:100vh;显示:栅格;放置内容:中心;}.儿童{背景:hsl(0,0%,0%);颜色:白色;填充:3rem;大纲:0;光标:指针;字体:18px/1.25无衬线;宽度:20ch;}<div class=“parent”><div class=“child”tabindex=“1”>点击或关注我,我的父母会改变。</div></div>

至少包括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>

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的浏览器兼容性。