CSS Özelliklilik

Spesifikite nedir?

Aynı elemente yönelik iki veya daha fazla çatışan CSS kuralı varsa, tarayıcı belirli bir kuralın en spesifik olduğunu belirlemek için bazı ilkeler izler ve bu nedenle kazanır.

Spesifikiteyi (specificity) puan veya derece olarak düşünerek, sonunda hangi stil beyanlarının elemente uygulanacağını belirleyebilirsiniz.

Genel seçiciler (*), düşük spesifikiteye sahiptirken, ID seçiciler yüksek spesifikiteye sahiptir!

Dikkat:Bu spesifikite, CSS kurallarının belirli elementlere uygulanmadığı yaygın bir neden, olsa da sizi etkileyebilir.

Spesifikite hiyerarşisi

Her seçici spesifikite hiyerarşisinde kendi konumuna sahiptir. Seçicilerin spesifikite seviyesini tanımlayan dört kategori aşağıdaki gibidir:

Satır içi stiller - Satır içi (dahili) stiller doğrudan düzenlenmek istenen elemente eklenir. Örnek: <h1 style="color: #ffffff;">.

ID - ID, özellik sayfasının benzersiz tanımlayıcısıdır, örneğin #navbar.

Sınıf, özellik ve sahte sınıflar - Bu kategori .classes, [özellikler] ve sahte sınıfları içerir, örneğin :hover, :focus gibi.

Element ve sahte elementler - Bu kategori element adları ve sahte elementleri içerir, örneğin h1, div, :before ve :after.

Spesifikite nasıl hesaplanır?

Spesifikitenin nasıl hesaplandığını unutmayın!

0'dan başlayarak, style özelliğine 1000, her ID'ye 100, her özellik, sınıf veya sahte elemente 10, her element adı veya sahte elemente 1 ekleyin.

Aşağıdaki üç kod parçasını düşünün:

Örnek

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Başlık</h1></div>
  • A'nın spesifikitesi 1'dir (bir element)
  • B'nin spesifikitesi 101'dir (bir ID ataması ve bir element)
  • C'nin spesifikitesi 1000'dir (satır içi stil)

Çünkü 1 < 101 < 1000, bu yüzden üçüncü kural (C) daha yüksek spesifikiteye sahiptir, bu yüzden uygulanacaktır.

Spesifikite kuralı 1:

Spesifikite aynı olduğunda: en yeni kural önemlidir - Eğer aynı kuralı iki kez dışarıdan stil tablosuna yazarsanız, stil tablosunda sonraki kural düzenlenmek istenen elemente daha yakın olduğu için uygulanacaktır:

Örnek

h1 {background-color: yellow;}
h1 {background-color: red;}

Kişisel olarak deneyin

Sonraki kural her zaman uygulanır.

Spesifikite kuralı 2:

ID seçicisi özellik seçicisinden daha yüksek spesifikitedir - Aşağıdaki üç satır koduna bakın:

Örnek

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Kişisel olarak deneyin

İlk kural diğer iki kuraldan daha spesiftir, bu yüzden uygulanacaktır.

Spesifikite kuralı 3:

Yerel seçici tek element seçicisinden daha spesiftir - Düzenlenmek istenen elemente daha yakın olan yerleştirilmiş stiller daha spesiftir. Bu nedenle aşağıdaki durumlar için:

Örnek

Dışarıdan CSS dosyasından gelen:

#content h1 {background-color: red;}

HTML dosyasında:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Uygulanacak olan sonraki kuraldır.

Özelliklik Kuralları 4:

Sınıf Seçicileri herhangi bir element seçicisini yenler - Sınıf Seçicileri (örneğin .intro, h1, p, div vb.):

Örnek

.intro {background-color: yellow;}
h1 {background-color: red;}

Kişisel olarak deneyin

Ayrıca,Genel Seçiciler ve miras alınan değerler 0'dır - *'nin özellikliği, body * ve benzerleri 0'dır. Miras alınan değerlerin özellikliği de 0'dır.