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

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

li < a.active {
    property: value;
}

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

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


当前回答

更新2022 CSS选择器4

在CSS Selectors 4规范中,CSS引入了一个名为:has()的新选择器,它最终允许我们选择父级。这意味着我们将能够针对一个包含特定子元素的CSS元素。这在Safari和Chrome105中都已得到支持。显示完整的支撑台在这里

父选择器工作

在CSS中,如果我们想选择一些东西,我们使用DOM下面的选择器。

例如,在div标记中选择p标记如下所示:

 div p {
   color: red;
}

不过,到目前为止,我们还无法真正选择其中包含p标记的div标记,这意味着我们不得不求助于Javascript。没有在CSS中实现这一点的主要原因是,这是一个相当昂贵的操作。CSS解析速度相对较快,但选择父标记需要相对较大的处理量。

使用:has选择器,我们现在可以选择具有p子级的div元素,或选择器的任何正常组合。

例如,选择带有子p的div现在看起来像这样:

div:has(p) {
  color: red;
}

这将使任何带有子p的div变为红色。

将父选择与其他选择器组合

就像任何其他CSS选择器一样,我们可以针对特定情况组合这些选择器。例如,如果只选择具有直接span子级的div标记:

div:has(> span) {
  color: red;
}

正如:的词汇所暗示的,它不仅仅局限于父母的选择。

例如,下面我们可以选择一个span,该span:有一个同级div:

span:has(+ div) {
color: red;
}

甚至,通过使用:not()选择器选择一个没有子元素的元素。

例如,下面将选择任何没有p子级的div:

div:not(:has(p)) {
 color: red;
}

选择仅包含CSS中文本的元素

CSS中一个非常常见的问题是:empty标记不选择包含任何文本的元素,因此有时元素可以包含一个空格,而:empty将不适用。has选择器使我们能够选择只包含文本节点而不包含其他子元素的元素。

虽然这并不是简单的空元素和空格的完美解决方案(因为这将选择任何只包含文本的元素,而不包含额外的HTML DOM元素),但它确实让我们能够选择只包含文本节点的DOM元素,这在以前是不可能的。我们可以通过以下代码实现这一点:

div:not(:has(*)) {
  background: green;
}

其他回答

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

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

由于不可能使用纯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的任何讨论中讨论。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。

这里有很多技术解释。

Jonathan Snook解释了如何评估CSS。

Chris Coyier谈家长选择。

Harry Roberts再次谈到了如何编写高效的CSS选择器。

但妮可·沙利文对积极趋势有一些有趣的事实。

这些人都是前端开发领域的顶级人物。

如果子代具有焦点,则内的伪元素: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>