是否有 CSS 父选择器？

Is there a CSS parent selector?

提问by jcuenod

How do I select the <li>element that is a direct parent of the anchor element?

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

As an example, my CSS would be something like this:

例如，我的 CSS 将是这样的：

li < a.active {
    property: value;
}

Obviously there are ways of doing this with JavaScript, but I'm hoping that there is some sort of workaround that exists native to CSS Level 2.

显然有一些方法可以用 JavaScript 做到这一点，但我希望有某种 CSS Level 2 原生的解决方法。

The menu that I am trying to style is being spewed out by a CMS, so I can't move the active element to the <li>element... (unless I theme the menu creation module which I'd rather not do).

我试图设计的菜单被 CMS 喷出，所以我无法将活动元素移动到<li>元素......（除非我将菜单创建模块设为主题，而我不想这样做）。

Any ideas?

有任何想法吗？

采纳答案by Dan Herbert

There is currently no way to select the parent of an element in CSS.

目前没有办法在 CSS 中选择元素的父级。

If there was a way to do it, it would be in either of the current CSS selectors specs:

如果有办法做到这一点，它将在当前的 CSS 选择器规范中的任何一个中：

• Selectors Level 3 Spec
• CSS 2.1 Selectors Spec

• 选择器级别 3 规范
• CSS 2.1 选择器规范

That said, the Selectors Level 4 Working Draftincludes a :has()pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

也就是说，选择器级别 4 工作草案包括一个:has()提供此功能的伪类。它将类似于jQuery 实现。

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

However, as of May 2020, this is still not supported by any browser.

但是，截至 2020 年 5 月，这仍然不受任何浏览器支持。

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

同时，如果您需要选择父元素，则必须求助于 JavaScript。

回答by jeroen

I don't think you can select the parent in CSS only.

我认为您不能仅在 CSS 中选择父项。

But as you already seem to have an .activeclass, it would be easier to move that class to the li(instead of the a). That way you can access both the liand the avia CSS only.

但是，由于您似乎已经拥有一个.active类，因此将该类移动到li（而不是a）会更容易。这样你就只能访问li和a通过 CSS。

回答by Idered

You can use this script:

您可以使用此脚本：

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

This will select any parent of a text input. But wait, there's still much more. If you want, you can select a specified parent:

这将选择文本输入的任何父级。但是等等，还有更多。如果需要，您可以选择指定的父级：

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

Or select it when it's active:

或者在它处于活动状态时选择它：

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

Check out this HTML:

看看这个 HTML：

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

You can select that span.helpwhen the inputis active and show it:

您可以span.help在input活动时选择并显示它：

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

There are many more capabilities; just check out the documentation of the plugin.

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

BTW, it works in Internet Explorer.

顺便说一句，它适用于 Internet Explorer。

回答by zcrar70

As mentioned by a couple of others, there isn't a way to style an element's parent/s using just CSS but the following works with jQuery:

正如其他几个人所提到的，没有一种方法可以仅使用 CSS 来设置元素的父元素的样式，但以下内容适用于jQuery：

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

回答by Yukulélé

Yes: :has()

是的： :has()

Browser support: none

浏览器支持：无

回答by Salman A

There is no parent selector; just the way there is no previous sibling selector. One good reason for not having these selectors is because the browser has to traverse through all children of an element to determine whether or not a class should be applied. For example, if you wrote:

没有父选择器；就像没有以前的兄弟选择器一样。没有这些选择器的一个很好的原因是浏览器必须遍历元素的所有子元素来确定是否应该应用一个类。例如，如果你写：

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

Then the browser will have to wait until it has loaded and parsed everything until the </body>to determine if the page should be red or not.

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

The article Why we don't have a parent selectorexplains it in detail.

文章为什么我们没有父选择器详细解释了它。

回答by Josh

There isn't a way to do this in CSS 2. You could add the class to the liand reference the a:

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

li.active > a {
    property: value;
}

回答by Raseko

Try to switch ato blockdisplay, and then use any style you want. The aelement will fill the lielement, and you will be able to modify its look as you want. Don't forget to set lipadding to 0.

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

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

回答by cobaasta

The CSS selector “General Sibling Combinator” could maybe used for what you want:

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

E ~ F {
    property: value;
}

This matches any Felement that is preceded by an Eelement.

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

回答by Mark Hurd

Not in CSS 2 as far as I'm aware. CSS 3 has more robust selectors but is not consistently implemented across all browsers. Even with the improved selectors, I don't believe it will accomplish exactly what you've specified in your example.

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