Aturan !important CSS
- Hal Sebelumnya Spesifisitas CSS
- Hal Berikutnya Fungsi Matematika CSS
apa itu !important?
CSS !important peraturan untuk memberikan prioriti yang lebih tinggi untuk atribut/nilai daripada gaya biasa.
secara kenyataan, jika anda gunakan !important peraturan, ia akan menutupi semua gaya yang sebelumnya untuk atribut khusus ini elemen!
biarakan kita lihat contoh:
Contoh
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
penerangan contoh
di contoh di atas, tiga paragraf ini akan mendapatkan warna latar belakang merah, walaupun pemilih ID dan kelas mempunyai spesifisiti yang lebih tinggi.!important peraturan menutupi kedua-dua keadaan ini atribut background-color.
perhatian penting tentang !important
penutupan !important peraturan yang satu-satunya untuk menutupi adalah untuk mengandung pernyataan lain yang sama (atau yang lebih tinggi) spesifisiti di dalam sumber kod. !important peraturan - ini adalah permulaan masalah! Ini akan membuat kod CSS menjadi cacat, pembaahan juga akan susah, terutama jika anda memiliki stylesheet besar!
di sini kami membuat contoh yang sederhana. ketika anda melihat kod sumber CSS, anda tidak cukup jelas yang warna yang dianggap penting:
Contoh
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
petunjuk:pengetahuan !important peraturan adalah baik. anda mungkin akan melihatnya di dalam kod sumber CSS. tetapi, kecuali anda pasti mesti gunakannya, jangan gunakannya.
mungkin ada satu atau dua kegunaan yang masuk akal untuk !important
satu bentuk penggunaan !important keadaan adalah, jika anda mesti menutupi gaya yang tidak dapat ditutupi dengan cara lain. Ini mungkin kerana anda menggunakan sistem pengelolaan konten (CMS) dan tidak dapat mengedit kod CSS. kemudian anda boleh menetapkan beberapa gaya khusus untuk menutupi beberapa gaya CMS.
satu bentuk penggunaan !important keadaan adalah: jika anda mahu semua butang di halaman web anda mempunyai bentuk khusus. Di sini, gaya butang adalah warna latar belakang abu-abu, teks putih serta beberapa margin dalaman dan garisan:
Contoh
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
jika kami meletakkan butang di dalam elemen lain yang mempunyai spesifisiti yang tinggi, bentuk butang seringkali akan 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 kapanpun, kita dapat menambahkan !important Tambahkan atur peraturan seperti berikut ke atribut tombol:
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
