Apakah yang dimaksudkan: tidak () kelas pseudo dalam CSS?

Apakah yang dimaksudkan: tidak () kelas pseudo dalam CSS?

The :not() pseudo-class dalam CSS adalah notasi fungsional yang membolehkan anda mengecualikan unsur-unsur tertentu dari pemilihan. Ia digunakan untuk membuat pemilih yang lebih spesifik dengan menafikan pemilih yang diberikan dalam kurungan. Sebagai contoh, p:not(.special) akan memilih semua <p></p> elemen kecuali mereka yang mempunyai kelas "istimewa".

Sintaks untuk :not() kelas pseudo adalah :not(selector) , di mana selector boleh menjadi pemilih mudah seperti pemilih jenis, pemilih kelas, pemilih ID, atau kelas pseudo (tetapi bukan satu lagi kelas pseudo atau pseudo-element). The :not() kelas pseudo adalah sebahagian daripada spesifikasi CSS3 dan disokong secara meluas di seluruh pelayar moden.

Bagaimanakah saya boleh menggunakan: tidak () kelas pseudo untuk meningkatkan pemilih CSS saya?

Menggunakan :not() kelas pseudo dapat meningkatkan ketepatan dan pemeliharaan pemilih CSS anda dalam beberapa cara:

1. Mengurangkan kekhususan : Dengan tidak termasuk unsur -unsur, anda boleh memastikan pemilih anda kurang spesifik, yang dapat membantu mengekalkan lata dan mengelakkan peperangan spesifik. Sebagai contoh, bukannya .container .content p.special Untuk mensasarkan semua elemen p kecuali yang mempunyai kelas "khas", anda hanya boleh menggunakan p:not(.special) .
2. Memudahkan pemilih : yang :not() kelas pseudo boleh membantu anda menulis lebih banyak CSS ringkas. Sebagai contoh, bukannya menulis peraturan berasingan kepada elemen gaya yang berbeza, anda boleh menggabungkannya menjadi satu pemilih. Sebagai contoh, button:not([disabled]) mensasarkan semua butang kecuali yang dilumpuhkan.
3. Meningkatkan kebolehbacaan : Menggunakan :not() boleh membuat niat anda lebih jelas kepada pemaju lain yang membaca CSS anda. Pemilih seperti nav ul:not(.dropdown) dengan jelas menunjukkan bahawa anda menggayakan semua senarai yang tidak teratur dalam bar navigasi, kecuali yang mempunyai kelas "dropdown".
4. Meningkatkan Prestasi : Dalam beberapa kes, menggunakan :not() dapat membantu pelayar mengoptimumkan rendering dengan cepat tidak termasuk unsur -unsur yang tidak perlu digayakan, walaupun ini bergantung pada pelaksanaan penyemak imbas.

Apakah kes penggunaan biasa untuk: tidak () kelas pseudo dalam reka bentuk web?

The :not() kelas pseudo adalah serba boleh dan mempunyai beberapa kes penggunaan biasa dalam reka bentuk web:

1. Tidak termasuk elemen interaktif : Anda mungkin mahu menggunakan gaya untuk semua elemen kecuali yang interaktif. Sebagai contoh, *:not(button):not(input):not(select) boleh digunakan untuk gaya semua elemen kecuali kawalan borang.
2. Reka bentuk responsif : Dalam reka bentuk responsif, anda mungkin mahu menggunakan gaya untuk elemen kecuali pada saiz skrin tertentu. Sebagai contoh, @media (max-width: 768px) { div:not(.mobile-friendly) { display: none; } } akan menyembunyikan semua elemen div kecuali mereka yang mempunyai kelas "mesra mudah alih" pada skrin yang lebih kecil daripada 768px.
3. Elemen Teks Styling : Selalunya, anda mahu menggunakan gaya teks untuk semua elemen teks kecuali yang ada di dalam bekas tertentu. Sebagai contoh, body *:not(h1):not(h2):not(h3) { font-size: 16px; } akan menetapkan saiz fon kepada 16px untuk semua elemen di dalam badan, kecuali untuk tajuk.
4. Gaya penetapan semula :: :not() kelas pseudo boleh berguna untuk menetapkan semula gaya. Sebagai contoh, input:not([type="submit"]):not([type="button"]) { border: none; } akan mengeluarkan sempadan dari semua input kecuali jenis hantar dan butang.

Bolehkah: tidak () kelas pseudo digabungkan dengan pemilih lain, dan jika ya, bagaimana?

Ya,: :not() kelas pseudo boleh digabungkan dengan pemilih lain untuk membuat peraturan yang lebih kompleks dan tepat. Berikut adalah beberapa cara untuk menggabungkannya:

1. Chaining dengan pemilih lain : Anda boleh berantai :not() dengan pemilih lain untuk memperbaiki pilihan anda. Sebagai contoh, ul li:not(:first-child):not(:last-child) memilih semua elemen li dalam ul kecuali yang pertama dan terakhir.
2. Menggabungkan dengan kelas pseudo : yang :not() kelas pseudo boleh digabungkan dengan kelas pseudo lain seperti :hover , :focus , atau :checked . Sebagai contoh, button:not(:disabled):hover akan menggunakan gaya ke butang yang tidak dilumpuhkan apabila melayang.
3. Menggunakan dengan pemilih atribut : Anda boleh menggunakan :not() dengan pemilih atribut untuk mengecualikan elemen berdasarkan atribut mereka. Sebagai contoh, a:not([href^="mailto:"]) memilih semua elemen utama kecuali mereka yang mempunyai atribut href bermula dengan "Mailto:".
4. Bersarang dalam pemilih lain : The :not() pseudo-class boleh bersarang dalam pemilih lain. Sebagai contoh, .container > *:not(.special) > p akan memilih semua elemen p yang langsung kanak -kanak dari mana -mana elemen di dalam .container , kecuali mereka yang mempunyai kelas "istimewa".

Dengan menggabungkan :not() dengan pemilih lain, anda boleh membuat peraturan CSS yang sangat disasarkan dan cekap yang meningkatkan gaya dan prestasi reka bentuk web anda.

Atas ialah kandungan terperinci Apakah yang dimaksudkan: tidak () kelas pseudo dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!