Aturan !important CSS
- Hal Sebelumnya Spesifisitas CSS
- Hal Berikutnya Fungsi Matematika CSS
Apa itu !important?
Dalam CSS, !important Aturan digunakan untuk memberikan prioritas yang lebih tinggi untuk atribut/nilai dibandingkan gaya biasa.
Sebenarnya, jika Anda menggunakan !important Aturan, yang akan menutupi semua aturan gaya sebelumnya untuk atribut khusus itu di elemen ini!
Biarkan kita lihat contoh:
Contoh
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Penjelasan contoh
Dalam contoh di atas, semua tiga paragraf akan mendapatkan warna latar belakang merah, walaupun pemilih ID dan kelas memiliki tingkat kepentingan yang lebih tinggi.!important Aturan menutupi atribut background-color di kedua kasus ini.
Pertimbangan penting tentang !important
Penutupan !important Cara tunggal untuk menutupi aturan adalah dengan menyertakan lagi deklarasi yang memiliki (atau tingkat kepentingan yang lebih tinggi) di dalam kode sumber. !important Aturan - ini adalah awal masalah! Ini akan membuat kode CSS menjadi cacat, dan pengembangan pula akan berat, khususnya jika Anda memiliki tabel gaya besar!
Di sini kami menciptakan contoh sederhana. Saat Anda melihat kode sumber CSS, Anda tak jelas warna mana yang dianggap paling penting:
Contoh
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Petunjuk:Pertimbangan: !important Aturan adalah baik. Anda mungkin melihatnya di dalam kode sumber CSS. Tetapi, kecuali Anda pasti harus memakainya, jangan gunakan itu.
Mungkin ada beberapa kasus penggunaan yang masuk akal untuk !important.
Salah satu cara penggunaannya adalah !important Kondisi adalah, jika Anda harus menutupi gaya yang tidak dapat ditutupi dengan cara lain. Ini mungkin karena Anda menggunakan Manajemen Konten (CMS) dan tidak dapat mengedit kode CSS. Lalu Anda dapat menetapkan beberapa gaya khusus untuk menutupi beberapa gaya CMS.
Salah satu cara penggunaannya adalah !important Kondisi adalah: asumsikan Anda ingin semua tombol di halaman yang ada memiliki tampilan khusus. Di sini, gaya tombol adalah warna latar belakang abu-abu, teks putih, serta beberapa margin internal dan border:
Contoh
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Jika kami menempatkan tombol di elemen lain yang memiliki spesifisitas yang lebih tinggi, tampilan tombol kadang-kadang berubah, dan atribut akan berkonflik. Berikut adalah contoh:
Contoh
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Untuk "memaksa" semua tombol untuk memiliki penampilan yang sama kapan saja, kami dapat memasang !important Menambahkan aturan ke atribut tombol, seperti yang ditunjukkan di bawah ini:
Contoh
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
- Hal Sebelumnya Spesifisitas CSS
- Hal Berikutnya Fungsi Matematika CSS
