5- HTML – CSS Kavramları ve Temelleri İçin Bir Kılavuz: CSS Özgüllüğü

CSS’de “özgüllük” ne anlama geliyor?

Sıra

İlk olarak, her şey eşit olduğundan, stil sayfasında iki seçiciyi kullanma sırası önemlidir. Yani iki sınıflı bir stil sayfamız varsa:

Eşit ağırlıklı iki seçiciyi karşılaştırma

.speed {
  color: gray;
}

.bar {
  color: blue;
}

ve aynı öğede bu sınıfların her ikisine de sahipsiniz.

Her iki seçiciyi de kullanan bir örnek

<div class="speed bar">Ben hangi rengim?</div>

…ve en sona yazılan sınıf kazanır. Bu duruma göre öğenin rengi kırmızıdır. Çünkü .bar stil sayfasının en altında yazılmıştır.

Spesifikliğin hesaplanması

CSS, özgüllüğü belirlemek için bir sayı ölçeği kullanır. Bir öğenin ne kadar spesifik olduğunu görmek için bu özgüllük hesaplayıcıyı da kullanabilirsiniz.

Bildiğimiz gibi, üç bölüm vardır: ID, Class ve Type. Ölçekte, hepsi başlangıçta 0 ile temsil edilir.

Seçiciniz seçicilerden birini her içerdiğinde, o kovayı 1 artırırsınız.

Bir tür seçici ekleyin.

h1 {
  /* 001 */
}

Bir sınıf seçici ekleyin.

.container h1 {
  /* 011 */
}

Bir Id seçici ekleyin.

#landing-page .container h1 {
  /* 111 */
}

Bu ölçeği tamamen 10 tabanlı bir sayı sistemi gibi düşünebilirsiniz. Yalnızca bir etiket 1 (bir) ise ve bir sınıf ve tür 11 (onbir) ise ve bir kimlik, sınıf ve etiket 111 (yüzbir) ise, hangisi en büyüğüdür? Bu durumda, 111 en büyük ve dolayısıyla en belirgin olanıdır.

Belirli bir pakette 1 id, 15 sınıf ve 30 tür gibi 10’dan fazla öğeniz varsa, bu benzetme işe yaramaz, ancak bunu anlamsal numaralandırma sistemleriyle de ilişkilendirebilirsiniz. 1.15.30 olur. Ancak, bu kadar çok seçici kullanıyorsanız, büyük olasılıkla bir şeyleri çok yanlış yapıyorsunuz.

Bu, bir sınıfın bir türden daha spesifik bir büyüklük sırası olduğu ve bir kimliğin bir sınıftan daha spesifik bir büyüklük sırası olduğu anlamına gelir.

Başka bir deyişle, iki kimlik ve 0 sınıfınız ve 1 kimlik ve 20 sınıfınız olsaydı, iki kimlik kazanırdı. Örneğin:

Bu seçici daha spesifiktir: (200 veya iki yüz)

#landing-page #about-section {
  /* 200 */
}

Bu seçici daha az spesifiktir: (140 veya yüz kırk)

#landing-page .foo.bar.baz.box {
  /* 140 */
}