Gibt es in CSS einen übergeordneten Selektor?

Question

Wie wähle ich das

-Element aus, das das direkte übergeordnete Element des Ankerelements ist?

Mein CSS könnte beispielsweise so aussehen:

li <
    Eigentumswert;
}

Natürlich ist es möglich, dies mit JavaScript zu erreichen, aber ich hatte auf eine Problemumgehung gehofft, die in CSS Level 2 integriert ist.

Das Menü, das ich formatieren möchte, wird von einem CMS generiert, daher kann ich das aktive Element nicht in das

-Element verschieben... (es sei denn, ich gestalte das Menüerstellungsmodul, aber das würde ich lieber nicht machen).

Answer 1

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

但是它在浏览器支持方面有限（目前尚不支持 Firefox）。

Answer 2

目前在CSS中没有一种方式可以选择一个元素的父元素，以便在所有浏览器中都能正常工作。

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

li:has(> a.active) { /* 应用于li标签的样式 */ }

目前只有Firefox不默认支持该功能。

与此同时，如果您需要选择一个具有完整跨浏览器支持的父元素，您将不得不在Firefox中使用JavaScript。