CSS中是否有父选择器?
P粉270842688
P粉270842688 2023-08-21 10:49:24
0
2
465
<p>如何选择作为锚点元素的直接父级的<code><li></code>元素?</p> <p>举个例子,我的CSS可能是这样的:</p> <pre class="brush:php;toolbar:false;">li < a.active { 属性: 值; }</pre> <p>显然,可以使用JavaScript来实现这个目标,但我希望有一种CSS Level 2原生的解决方法。</p> <p>我正在尝试样式化的菜单是由CMS生成的,所以我不能将活动元素移动到<code><li></code>元素中...(除非我主题化菜单创建模块,但我不想这样做)。</p>
P粉270842688
P粉270842688

全部回复(2)
P粉404539732

您可以使用:has() CSS 伪类

但是它的浏览器支持有限(目前Firefox不支持)。

P粉794851975

目前在CSS中没有一种方式可以在所有浏览器中选择元素的父级。

Selectors Level 4 Working Draft包括一个:has()伪类,它将提供这种能力。它将类似于jQuery的实现,但目前Firefox不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

Firefox是唯一一个目前默认不支持它的主要浏览器

在此期间,如果您需要选择具有完全跨浏览器支持的父元素,您将不得不在Firefox中使用JavaScript。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板