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

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

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

<div> <!-- do not select this -->
    <div> <!-- do not select this -->
        <ytd-rich-grid-media>
        </ytd-rich-grid-media>
    </div>
    <div> <!-- DO select this -->
        <ytd-rich-grid-media is-dismissed>
        </ytd-rich-grid-media>
    </div>
</div>

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

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 環境

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板