是否有CSS父選擇器？

如何選擇做爲錨元素直接父元素的<li>元素？

例如，個人CSS將是這樣的：

li < a.active {
    property: value;
}

顯然，可使用JavaScript進行此操做，可是我但願CSS Level 2自己具備某種解決方法。

我嘗試設置樣式的菜單已由CMS彈出，所以我沒法將active元素移至<li>元素...（除非我將菜單建立模塊做爲主題，但我不但願這樣作） 。

有任何想法嗎？

---

#1樓

CSS 2中沒有作到這一點的方法。您能夠將類添加到li並引用a ：

li.active > a {
    property: value;
}

---

#2樓

我認爲您只能在CSS中選擇父級。

可是，因爲您彷佛已經具備.active類，所以將該類移到li （而不是a ）會更容易。 這樣，您只能經過CSS訪問li和a 。

---

#3樓

據我所知，CSS 2中尚未。 CSS 3具備更強大的選擇器，但並不是在全部瀏覽器中都一致實現。 即便使用了改進的選擇器，我也不相信它會徹底完成您在示例中指定的功能。

---

#4樓

當前沒法在CSS中選擇元素的父級。

若是有辦法，能夠在當前的CSS選擇器規範中使用：

• 選擇器3級規格
• CSS 2.1選擇器規範

同時，若是須要選擇父元素，則必須使用JavaScript。

---

選擇器第4級工做草案包括:has()僞類，其工做原理與jQuery實現相同。 截至2019年， 任何瀏覽器仍不支持此功能 。

使用:has()能夠用如下方法解決原始問題：

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

---

#5樓

我知道OP正在尋找CSS解決方案，但使用jQuery便可輕鬆實現。 就我而言，我須要爲子<li>包含的<span>標籤找到<ul>父標籤。 jQuery具備:has選擇器，所以能夠經過其包含的子代來標識父代：

$("ul:has(#someId)")

將選擇具備id爲someId的子元素的ul元素。 或回答原始問題，如下方法應可解決（未測試）：

$("li:has(.active)")