CSS中是否有父選擇器？
P粉270842688
2023-08-21 10:49:24
<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>
您可以使用
:has()CSS 偽類別但是它的瀏覽器支援有限（目前Firefox不支援）。
目前在CSS中沒有一種方式可以在所有瀏覽器中選擇元素的父級。
Selectors Level 4 Working Draft包含一個
:has()偽類，它將提供這種能力。它將類似於jQuery的實作，但目前Firefox不支援。li:has(> a.active) { /* styles to apply to the li tag */ }Firefox是唯一一個目前預設不支援它的主要瀏覽器。
在此期間，如果您需要選擇具有完全跨瀏覽器支援的父元素，您將不得不在Firefox中使用JavaScript。