CSS'te farklı stil öncelikleri nasıl çalışır?

CSS'te stillerin öncelikleri, kaskad mekanizması ve seçicilerin özgüllüğü ile belirlenir. Temel ilkeler şunlardır:

1. Özgüllük — seçicinin ağırlığıdır, ID, sınıf, etiket ve diğer bileşenlerin sayısına göre hesaplanır. Özgüllük ne kadar yüksekse, stil o kadar önceliklidir.

   • ID seçici (#id) yüksek önceliğe sahiptir.
   • Sınıflar (.sınıf), öznitelikler ve psödo-sınıflar orta önceliğe sahiptir.
   • Etiketler (div, p) düşük önceliğe sahiptir.

2. Kaskad — iki kuralın özgüllüğü aynıysa, kodda daha sonra tanımlanan uygulanır.

3. !important — stile maksimum öncelik ekler, diğer kuralları geçersiz kılar, daha yüksek özgüllüğe sahip diğer !important kuralları hariç.

4. Kalıtım — bazı özellikler (color, font-family gibi) ebeveyn tarafından miras alınır, eğer yeniden tanımlanmazsa.

Örnek:

#header { color: red; }       /* özgüllük 100 */
.menu { color: blue; }        /* özgüllük 10  */
div { color: green; }         /* özgüllük 1   */

/* Bir öğenin id="header" ve sınıf="menu" varsa, renk kırmızı olur */

Bu şekilde, tarayıcı en yüksek özgüllüğe sahip stili seçer, sıralamayı ve !important varlığını dikkate alarak.