如何在 CSS 中選擇包含具有給定屬性的子元素的元素?
P粉170438285
P粉170438285 2023-09-08 18:24:41
0
1
512

我正在嘗試編寫一個使用者腳本,該使用者腳本選擇包含帶有[is 的 # 元素的

元素-dismissed]屬性作為直接子級。

環境支援按屬性選擇;此使用者腳本能夠選擇目標元素的子元素:

ytd-rich-grid-media[is-dismissed] { display: none !important; }

該環境也支援:has()選擇器;該腳本能夠選擇包含

##(無論屬性或繼承深度如何)。
div:has(ytd-rich-grid-media) { display: none !important; }

最後,環境支援

>子選擇器;此腳本能夠選擇

# 的直接子元素 ## 元素:
div > ytd-rich-grid-media { display: none !important; }
但是,當我嘗試將

:has()

選擇器與其他任何工具結合時,一切都崩潰了。我希望我正在尋找的 CSS 看起來像這樣:

div:has(> ytd-rich-grid-media[is-dismissed] ) { display: none !important; }
但是,這會在 Opera 上的 Stylus 中傳回錯誤。第一個錯誤是

預期 RPAREN 但發現 '>'。

;如果作為診斷步驟刪除>,則第一個錯誤將改為Expected RPAREN but found '['.。如果我刪除[is-dismissed],第一個錯誤仍然存在。雖然我無法找到任何關於

:has()

是否可以支援具有屬性選擇器的子項的信息,但我發現了一些資料(包括這個)表明>選擇器應該與:has()一起正常工作。這是一個實作錯誤(在 Opera 和/或 Stylus 中)、不受支援的 CSS 選擇器組合(無論是在 Opera 中還是在整個 CSS 中)、我在組裝這些選擇器時的錯誤,還是其他原因?

P粉170438285
P粉170438285

全部回覆 (1)
P粉404539732

看起來更像是手寫筆擴充的問題。

該選擇器在Chrome 開發工具其他 CSS 環境

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!