Rumah > hujung hadapan web > tutorial css > Adakah CSS `:not()` Menyasarkan Keturunan Segera Sahaja?

Adakah CSS `:not()` Menyasarkan Keturunan Segera Sahaja?

Patricia Arquette
Lepaskan: 2024-12-03 05:26:10
asal
905 orang telah melayarinya

Does CSS `:not()` Selectively Target Only Immediate Descendants?

Adakah Pemilih CSS :not() Ditujukan untuk Keturunan Jauh?

Css3 :not() pseudo-class, seperti yang diterangkan dalam dokumentasi rasmi di http://www.w3.org/TR/css3-selectors/#negation, direka untuk memadankan elemen yang tidak sepadan dengan pemilih yang diberikan. Walau bagaimanapun, pengguna telah menemui kefungsian terhad dalam penggunaannya dengan keturunan yang jauh.

Pertimbangkan contoh:

div :not(p) { color: red; }
Salin selepas log masuk

Semasa pemilih ini berfungsi apabila

ialah anak langsung

, ia gagal apabila

adalah keturunan yang lebih jauh. Tingkah laku ini disengajakan, kerana :not() hanya menafikan keturunan langsung unsur sasaran.

Dalam kes di mana

mengandungi

, ia ialah sendiri yang sepadan dengan *:not(p) dan mewarisi gaya.

elemen itu sendiri masih dikira terhadap penolakan, mewarisi warna teks daripada induknya.

Untuk mengatasi pengehadan ini, menyasarkan

elemen secara langsung disyorkan:

p { color: black; }
Salin selepas log masuk

Pemilih Tahap 4 mencadangkan peningkatan :not() untuk menerima pemilih kompleks penuh yang mengandungi penggabung, membenarkan penyasaran keturunan yang lebih khusus. Walau bagaimanapun, ciri ini masih dalam fasa pelaksanaan.

Atas ialah kandungan terperinci Adakah CSS `:not()` Menyasarkan Keturunan Segera Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan