Menggunakan! Penting dalam CSS adalah cara wajib untuk mengatasi masalah keutamaan gaya, tetapi harus digunakan dengan berhati -hati. Peraturan teras adalah:! Penting membolehkan gaya yang ditentukan melangkau logik cascade biasa dan mendapatkan keutamaan tertinggi melainkan sifat yang sama ditemui dan tanda yang sama! Peraturan penting masih ditentukan oleh ciri dan perintah pemilih. Sebagai contoh, p {color: red! Penting} masih akan memaparkan teks merah walaupun menghadapi pemilih ID watak yang lebih tinggi seperti #perenggan khas {color: blue}. Senario yang berkenaan termasuk: 1. Mengatasi gaya inline dalam kandungan pihak ketiga; 2. Cepat menguji kesan gaya semasa pembangunan dan debugging; 3. Pastikan pengubahsuaian berkuatkuasa dalam gaya pengguna yang ditentukan atau sambungan penyemak imbas. Walau bagaimanapun, penyalahgunaan! Penting boleh menyebabkan kesukaran penyelenggaraan, mengganggu mekanisme selongsong dan mengembangkan tabiat pengekodan yang buruk. Alternatif yang lebih selamat termasuk: 1. Meningkatkan kekhususan pemilih (seperti menggunakan. Parent. Dan bukannya. Kanak -kanak); 2. Laraskan susunan helaian gaya untuk membuat peraturan utama ke belakang; 3. Gunakan kerangka keutamaan kelas alat untuk mengurangkan konflik; 4. Meningkatkan kekhususan dengan mengulangi nama kelas (seperti .button.button {}); 5. Mengatur struktur CSS berlapis untuk mencapai kawalan gaya secara semulajadi. Oleh itu, penting harus digunakan sebagai penyelesaian kecemasan sementara dan bukannya penyelesaian jangka panjang.

Peraturan !important dalam CSS adalah cara untuk mengatasi litar semulajadi dan kekhususan gaya. Singkatnya, ia memberitahu pelayar bahawa gaya ini harus menjadi keutamaan terhadap orang lain, walaupun terdapat lebih banyak pemilih atau peraturan yang lebih khusus.

Ia boleh berguna dalam beberapa situasi, tetapi pada umumnya lebih baik untuk mengelakkannya melainkan benar -benar perlu - kerana apabila anda mula menggunakannya, anda mungkin mendapati diri anda perlu menggunakannya lagi dan lagi untuk memastikan perkara berfungsi.

Bagaimana !important mempengaruhi spesifikasi CSS

Biasanya, CSS menyelesaikan konflik berdasarkan spesifikasi pemilih dan perintah sumber. Pemilih yang lebih spesifik menang, dan jika dua mempunyai spesifikasi yang sama, yang menang terakhir.

Menambah !important untuk perisytiharan CSS pada dasarnya melompat ke bahagian atas hierarki itu. Ia menjadikan harta dan nilai itu mengabaikan peraturan biasa dan mengambil keutamaan - melainkan jika satu lagi !important untuk harta yang sama wujud pada elemen yang sama, di mana satu dengan spesifikasi yang lebih tinggi (atau kemudian dalam stylesheet) akan menang.

Contohnya:

 p {
  Warna: merah! Penting;
}

#perenggan khas {
  Warna: Biru;
}

Walaupun pemilih ID #special-paragraph mempunyai spesifikasi yang lebih tinggi daripada pemilih p , perenggan masih akan merah-kerana !important .

Apabila mungkin masuk akal untuk digunakan !important

Terdapat beberapa senario di mana menggunakan !important boleh dibenarkan - walaupun mereka agak jarang berlaku.

• Mengatasi gaya inline
  Jika anda tidak mengawal HTML (seperti dalam widget pihak ketiga atau kandungan CMS yang dihasilkan), dan anda perlu mengatasi gaya sebaris, !important mungkin satu-satunya pilihan anda.

• Pembetulan cepat semasa pembangunan atau debugging
  Kadang -kadang apabila anda cuba menguji bagaimana gaya tertentu kelihatan, menambah !important sementara dapat membantu memintas isu -isu khusus yang kompleks tanpa menulis semula potongan besar CSS.

• Dalam gaya gaya pengguna atau sambungan penyemak imbas
  Jika anda menulis gaya tersuai untuk mengatasi tingkah laku laman web (seperti tweak mod gelap), !important membantu memastikan perubahan anda melekat.

Namun, kegunaan ini harus terhad. Jika anda mendapati diri anda menggunakan !important Seringkali, ia adalah tanda seni bina CSS anda mungkin perlu memikirkan semula.

Mengapa anda biasanya harus mengelakkan !important

Menggunakan !important terlalu sering membawa kepada masalah:

• Lebih sukar untuk mengekalkan dan debug
  Sebaik sahaja anda mempunyai banyak !important , memikirkan mengapa sesuatu yang digayakan dengan cara tertentu menjadi mengelirukan.

• Memecahkan lata
  Seluruh titik CSS adalah gaya yang membina satu sama lain secara logik. !important mengganggu aliran itu.

• Menggalakkan amalan CSS yang lemah
  Ia menjadi jalan pintas dan bukannya menangani isu sebenar - seperti meningkatkan kekhususan pemilih atau mengatur CSS anda lebih baik.

Daripada mencapai !important , cuba:

• Menggunakan pemilih yang lebih spesifik (misalnya,. .parent .child bukan hanya .child )
• Menyusun semula gaya gaya anda sehingga peraturan penting akan datang kemudian
• Menggunakan kerangka pertama utiliti seperti Tailwind, yang mengurangkan konflik tertentu

Alternatif yang lebih selamat: Gunakan kekhususan dengan bijak

Daripada memaksa menimpa !important

Salah satu helah umum ialah mengulangi nama kelas untuk meningkatkan kekhususan:

 / * Spesifik rendah */
.button {}

/ * Kekhususan yang lebih tinggi */
.button.button {}

Kaedah ini membolehkan anda mengatasi gaya asas tanpa melanggar lata.

Pendekatan lain adalah menganjurkan CSS anda ke dalam lapisan seperti gaya asas, gaya komponen, dan gaya utiliti - di mana setiap lapisan dibina pada yang sebelumnya. Dengan cara itu, anda jarang perlu memaksa mengatasi.

Jadi sementara !important tidak jahat, ia pasti alat untuk digunakan dengan berhati -hati. Fikirkannya sebagai pembalut sementara, bukan penyelesaian tetap.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Apakah kepentingan peraturan penting dalam CSS, dan kapan (jika pernah) harus digunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!