简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
如何在 CSS 中選擇包含具有給定屬性的子元素的元素？
P粉170438285
P粉170438285 2023-09-08 18:24:41
0
1
588

我正在嘗試編寫一個使用者腳本，該使用者腳本選擇包含帶有[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
P粉4045397322023-09-09 11:10:04 1樓

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

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！