CSS !important Kuralı

!important nedir?

CSS'teki !important kuralları, özelliği/değer için normal stillerden daha yüksek bir öncelik eklemek için kullanılır.

gerçekten, !important kuralları, bu belirli özelliğin önceki tüm stil kurallarını kapsar!

Bir örnek görelim:

Örnek

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

Kişisel Deneyim

örnek açıklaması

Yukarıdaki örnekte, tüm üç paragrafın ID seçicisi ve sınıf seçicisinden daha yüksek özgüllüğe sahip olmalarına rağmen, kırmızı arka plan rengi alacaklardır.!important kuralları, bu iki durumun arka plan rengi özelliğini kapsamaktadır.

!important önemli bilgileri

kapsamaktır !important kurallarını tek yolu, kaynak kodunda aynı (veya daha yüksek) özgüllüklü bir beyan içeren: !important kuralları - bu, sorunun başlangıcı! Bu, CSS kodunu karışık hale getirir ve hata ayıklama zorlaşır, özellikle büyük stil tablolarınız olduğunda!

Burada basit bir örnek oluşturduk. CSS kaynak kodunu kontrol ettiğinizde, hangi rengin en önemli olduğu oldukça açık değil:

Örnek

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Kişisel Deneyim

İpucu:bilgi: !important kuralları iyi. Bazı CSS kaynak kodlarında görebilirsiniz. Ancak, kesinlikle gerekli olmadıkça kullanmayın.

birkaç makul !important kullanımı olabilir

bir diğer kullanım: !important durumu, başka bir şekilde kapsayamadığınız stilleri kapsamak zorunda olduğunuz zamanlardır. Bu, içerik yönetim sistemi (CMS) kullanıyor ve CSS kodunu düzenleyemiyorsanız olabilir. O zaman bazı özel stilleri belirleyerek bazı CMS stillerini kapsayabilirsiniz.

bir diğer kullanım: !important durumu şu şekildedir: Sayfadaki tüm düğmelerin özel bir görünümü olmasını istediğinizi varsayalım. Burada, düğmenin tarzı gri arka renk, beyaz metin ve bazı iç dolgu ve çerçeve ile:

Örnek

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  
}

Kişisel Deneyim

Eğer düğmeyi daha yüksek özgüllüklü başka bir elemanın içinde yerleştirirsek, düğmenin görünümü bazen değişebilir ve özellikler çakışabilir. İşte bir örnek:

Örnek

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Kişisel Deneyim

Tüm düğmelerin her zaman aynı görünmesini !important Kuralların, düğmenin özelliklerine eklenmesi gerektiğini gösterir, örneğin:

Örnek

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

Kişisel Deneyim