如何选择作为锚元素的直接父元素的<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>元素。。。(除非我对菜单创建模块进行主题化,否则我不想这样做)。
当前回答
虽然目前标准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
其他回答
试试这个。。。
此解决方案使用无Javascript的简单CSS2规则,适用于所有浏览器,无论新旧浏览器。单击时,子锚点标记将激活其活动的伪类事件。然后,它简单地隐藏自己,允许活动事件向上冒泡到父li标签,然后父li标签重新设计自己的样式,并以新样式再次显示其锚定子对象。子对象已设置父对象的样式。
使用您的示例:
<ul>
<li class="listitem">
<a class="link" href="#">This is a Link</a>
</li>
</ul>
现在,将这些样式应用于a上的活动伪类,以在单击链接时重新设置父li标记的样式:
a.link {
display: inline-block;
color: white;
background-color: green;
text-decoration: none;
padding: 5px;
}
li.listitem {
display: inline-block;
margin: 0;
padding: 0;
background-color: transparent;
}
/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */
a.link:active {
display: none;
}
.listitem:active {
background-color: blue;
}
.listitem:active a.link {
display: inline-block;
background-color: transparent;
}
单击时,您应该会看到带有绿色背景的链接现在变为列表项的蓝色背景。
转到
单击。
否,不能仅在CSS中选择父级。
但由于您似乎已经有一个.active类,所以将该类移动到li(而不是a)会更容易。这样,您只能通过CSS访问li和a。
CSS选择器“General Sibling Combinator”可能用于您想要的用途:
E ~ F {
property: value;
}
这匹配前面有E元素的任何F元素。
目前还没有父选择器&它甚至没有在W3C的任何讨论中讨论。您需要了解浏览器如何评估CSS,才能真正了解我们是否需要它。
这里有很多技术解释。
Jonathan Snook解释了如何评估CSS。
Chris Coyier谈家长选择。
Harry Roberts再次谈到了如何编写高效的CSS选择器。
但妮可·沙利文对积极趋势有一些有趣的事实。
这些人都是前端开发领域的顶级人物。
更新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;
}