CSS中是否存在父級選擇器？
P粉713866425
2023-08-21 10:43:42
<p>如何選擇作為錨點元素的直接父級的<code><li></code>元素？ </p>
<p>例如，我的CSS可能是這樣的：</p>
<pre class="brush:php;toolbar:false;">li < a.active {
property: value;
}</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) { /* 应用于li标签的样式 */ }目前只有Firefox不預設支援該功能。
同時，如果您需要選擇一個具有完整跨瀏覽器支援的父元素，您將不得不在Firefox中使用JavaScript。