CSS !important Kuralı
Önemli olan ne?
CSS'deki !importantkural, bir özelliğe/değere normalden daha fazla önem vermek için kullanılır.
Aslında, !importantkuralı kullanırsanız, o öğedeki o belirli özellik için önceki TÜM stil kurallarını geçersiz kılar!
Bir örneğe bakalım:
Örnek
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Örnek Açıklama
Yukarıdaki örnekte. Kimlik seçici ve sınıf seçici daha yüksek bir özgüllüğe sahip olsa bile, üç paragrafın tümü kırmızı bir arka plan rengi alacaktır. Kural , her iki durumda !importantda özelliği geçersiz kılar .
background-color
Önemli Hakkında !important
Bir kuralı geçersiz kılmanın tek yolu
, kaynak kodunda aynı (veya daha yüksek) özgüllüğe sahip bir bildirime !important
başka bir kural eklemektir - ve işte sorun burada başlıyor! !importantBu, CSS kodunu kafa karıştırıcı hale getirir ve özellikle büyük bir stil sayfanız varsa, hata ayıklama zor olacaktır!
Burada basit bir örnek oluşturduk. CSS kaynak koduna baktığınızda hangi rengin en önemli olduğu çok net değil:
Örnek
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
İpucu: Kuralı bilmek iyidir !important
, bazı CSS kaynak kodlarında görebilirsiniz. Ancak mecbur kalmadıkça kullanmayınız.
Belki Bir veya İki Adil Kullanım !important
Kullanmanın bir yolu, !importantbaşka hiçbir şekilde geçersiz kılınamayan bir stili geçersiz kılmanız gerektiğidir. Bu, bir İçerik Yönetim Sistemi (CMS) üzerinde çalışıyorsanız ve CSS kodunu düzenleyemiyorsanız olabilir. Ardından, bazı CMS stillerini geçersiz kılmak için bazı özel stiller ayarlayabilirsiniz.
Kullanmanın başka bir yolu da !importantşudur: Bir sayfadaki tüm düğmeler için özel bir görünüm istediğinizi varsayalım. Burada, düğmeler gri bir arka plan rengi, beyaz metin ve bazı dolgu ve kenarlıklarla biçimlendirilmiştir:
Örnek
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Bir düğmenin görünümü bazen, onu daha yüksek özgüllüğe sahip başka bir öğenin içine koyarsak değişebilir ve özellikler çakışır. İşte buna bir örnek:
Örnek
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Ne olursa olsun tüm düğmeleri aynı görünüme "zorlamak" için !important
, düğmenin özelliklerine aşağıdaki gibi kuralı ekleyebiliriz:
Örnek
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}