Bagaimana untuk memilih elemen yang mengandungi elemen anak dengan atribut yang diberikan dalam CSS?-Soal Jawab Rangkaian PHP Cina

masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Bagaimana untuk memilih elemen yang mengandungi elemen anak dengan atribut yang diberikan dalam CSS?

P粉170438285

P粉170438285 2023-09-08 18:24:41

0

1

599

Saya cuba menulis skrip pengguna yang memilih objek dengan atribut [is 的元素的

元素-dismissed] sebagai anak langsung.

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

Persekitaran menyokong pemilihan mengikut atribut; skrip pengguna ini dapat memilih elemen anak elemen sasaran:

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

Persekitaran juga menyokong :has() 选择器；该脚本能够选择包含的

(tidak kira harta atau kedalaman warisan).

div:has(ytd-rich-grid-media) {
    
    display: none !important;
    
}

Akhir sekali, persekitaran menyokong > 子选择器；此脚本能够选择

的直接子元素 elemen:

div > ytd-rich-grid-media {
    
    display: none !important;
    
}

Tetapi apabila saya cuba menggabungkan pemilih :has() dengan mana-mana alat lain, semuanya rosak. Saya mahu CSS yang saya cari kelihatan seperti ini:

div:has(> ytd-rich-grid-media[is-dismissed] ) {
    
    display: none !important;
    
}

Walau bagaimanapun, ini mengembalikan ralat dalam Stylus pada Opera. Ralat pertama ialah 预期 RPAREN 但发现 '>'。；如果作为诊断步骤删除 >，则第一个错误将改为 Expected RPAREN but found '['.。如果我删除 [is-dismissed], ralat pertama masih ada.

Walaupun saya tidak dapat mencari sebarang maklumat sama ada :has() 是否可以支持具有属性选择器的子项的信息，但我发现了一些资料（包括这个）表明> 选择器应该与 :has() boleh menyokong kanak-kanak dengan pemilih atribut, saya telah menemui beberapa sumber (termasuk yang ini) yang mencadangkan bahawa pemilih > harus berfungsi dengan baik dengan . Adakah ini pepijat pelaksanaan (dalam Opera dan/atau Stylus), gabungan pemilih CSS yang tidak disokong (sama ada dalam Opera atau dalam CSS secara keseluruhan), pepijat di pihak saya semasa memasang pemilih ini atau sesuatu yang lain? 🎜

P粉170438285

P粉170438285

membalas semua(1)

P粉404539732

P粉4045397322023-09-09 11:10:04 Tingkat 1

Kelihatan lebih seperti isu sambungan stylus.

Pemilih ini tersedia dalam Chrome Dev Tools dan Persekitaran CSS yang lain.

Suka +0

Tambah Balasan

Topik popular

Lagi>

Artikel popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan