如何选择作为锚元素的直接父元素的<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父选择器(也称为: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的浏览器兼容性。
其他回答
我会雇佣一些JavaScript代码来实现这一点。例如,在React中,当您遍历数组时,向父组件添加另一个类,这表明它包含您的子组件:
<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
{kiddos.map(kid => <div key={kid.id} />)}
</div>
然后简单地:
.parent {
color: #000;
}
.parent.has-kiddos {
color: red;
}
更新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;
}
只是一个水平菜单的想法。。。
HTML的一部分
<div class='list'>
<div class='item'>
<a>Link</a>
</div>
<div class='parent-background'></div>
<!-- submenu takes this place -->
</div>
CSS的一部分
/* Hide parent backgrounds... */
.parent-background {
display: none; }
/* ... and show it when hover on children */
.item:hover + .parent-background {
display: block;
position: absolute;
z-index: 10;
top: 0;
width: 100%; }
更新的演示和其余代码
另一个示例是如何将其用于文本输入-选择父字段集
从技术上讲,没有直接的方法可以做到这一点。但是,您可以使用jQuery或JavaScript进行排序。
然而,你也可以这样做。
a.active h1 {color: blue;}
a.active p {color: green;}
jQuery
$("a.active").parents('li').css("property", "value");
如果您想使用jQuery实现这一点,这里是jQuery父选择器的引用。
试试这个。。。
此解决方案使用无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;
}
单击时,您应该会看到带有绿色背景的链接现在变为列表项的蓝色背景。
转到
单击。