如何选择作为锚元素的直接父元素的<li>元素?
例如,我的CSS应该是这样的:
li < a.active {
property: value;
}
很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
如何选择作为锚元素的直接父元素的<li>元素?
例如,我的CSS应该是这样的:
li < a.active {
property: value;
}
很显然,JavaScript有很多方法可以做到这一点,但我希望有某种变通方法可以在CSS Level 2中使用。
我正在尝试设置样式的菜单被CMS弹出,因此我无法将活动元素移动到<li>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
如果子代具有焦点,则内的伪元素: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中没有父选择器,但我正在开发一个名为axe(即增强的CSS选择器语法/ACSSSS)的(个人)项目,该项目在其7个新选择器中包括:
一个直接的父选择器<(它允许相反的选择>)任意祖先选择器^(启用与[SPACE]相反的选择)
axe目前处于相对早期的BETA开发阶段。
请在此处查看演示:
.父级{浮动:左侧;宽度:180px;高度:180px;右边距:12px;背景色:rgb(191191191);}.儿童{宽度:90px;高度:90px;边距:45px;填充顶部:12px;字体系列:无衬线;文本对齐:居中;字体大小:12px;背景色:rgb(255,255,0);}child.using-axe<父级{背景色:rgb(255,0,0);}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里,axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>
在上面的示例中,<是直接父选择器,因此
child.using-axe<父级
指:
.child.uning-axe的任何直接父级,即parent
您也可以使用:
.child.using-axe<div
这意味着:
child.using-axe的任何直接父级,它是一个div
更新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;
}
在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:
li.active > a {
property: value;
}
这是Selectors Level 4规范中讨论最多的方面。这样,选择器就可以通过在给定的选择器(!)后面使用感叹号来根据其子元素设置元素的样式。
例如:
body! a:hover{
background: red;
}
如果用户悬停在任何锚点上,将设置红色背景色。
但我们必须等待浏览器的实现:(
Selectors Level 4 Working Draft包含一个:has()伪类,将提供此功能。它将类似于jQuery实现,但目前Firefox不支持。
li:has(> a.active) { /* styles to apply to the li tag */ }
截至2022年,Firefox是唯一默认不支持它的浏览器。
同时,如果需要选择完全支持跨浏览器的父元素,则必须在Firefox中使用JavaScript。