是否有 CSS 父选择器?

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

例如,我的 CSS 将是这样的:

li < a.active {
    property: value;
}

显然,可以使用 JavaScript 进行此操作,但是我希望 CSS Level 2 本身具有某种解决方法。

我尝试设置样式的菜单已由 CMS 弹出,因此我无法将 active 元素移至<li>元素...(除非我将菜单创建模块作为主题,但我不希望这样做) 。

有任何想法吗?

答案

当前无法在 CSS 中选择元素的父级。

如果有办法,可以在当前的 CSS 选择器规范中使用:

同时,如果需要选择父元素,则必须使用 JavaScript。


选择器第 4 级工作草案包括:has()伪类,其工作原理与jQuery 实现相同。截至 2019 年, 任何浏览器仍不支持此功能

使用:has()可以用以下方法解决原始问题:

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

我认为您只能在 CSS 中选择父级。

但是,由于您似乎已经具有.active类,因此将该类移到li (而不是a )会更容易。这样,您只能通过 CSS 访问lia

您可以使用以下脚本

*! > input[type=text] { background: #000; }

这将选择文本输入的任何父项。但是,等等,还有更多。如果需要,可以选择一个指定的父对象:

.input-wrap! > input[type=text] { background: #000; }

或在活动时选择它:

.input-wrap! > input[type=text]:focus { background: #000; }

查看以下 HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

您可以在input处于活动状态时选择该span.help并显示它:

.input-wrap! .help > input[type=text]:focus { display: block; }

还有更多功能;只需查看插件的文档即可。

顺便说一句,它可以在 Internet Explorer 中使用。

正如其他一些人提到的那样,没有一种仅使用 CSS 来设置元素父元素样式的方法,但是以下方法可用于jQuery

$("a.active").parents('li').css("property", "value");

:has()

浏览器支持:

没有父选择器。就像以前没有同级选择器一样。没有这些选择器的一个很好的理由是,浏览器必须遍历元素的所有子元素,以确定是否应应用类。例如,如果您写了:

body:contains-selector(a.active) { background: red; }

然后,浏览器将不得不等待,直到它加载并解析了所有内容,直到</body>来确定该页面是否应为红色。

为什么我们没有父选择器的文章对此做了详细说明。

CSS 2 中没有做到这一点的方法。您可以将类添加到li并引用a

li.active > a {
    property: value;
}

尝试将a切换为block显示,然后使用所需的任何样式。 a元素将填充li元素,您将能够根据需要修改其外观。不要忘记将li padding 设置为 0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

CSS 选择器 “ General Sibling Combinator ” 可能用于您想要的内容:

E ~ F {
    property: value;
}

这与任何以E元素开头的F元素匹配。

据我所知,CSS 2 中还没有。 CSS 3 具有更强大的选择器,但并非在所有浏览器中都一致实现。即使使用了改进的选择器,我也不相信它会完全完成您在示例中指定的功能。