Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge
Özgüllük puanlarını hesaplayın ve herhangi bir stil çatışmasında hangi kuralın kazanacağını öngörün.
Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Özgüllük Nedir?
Birden fazla kural aynı öğeyi ve özelliği hedeflediğinde hangi CSS kuralının kazanacağını özgüllük belirler. Özgüllük, (A, B, C, D) biçiminde dört parçalı bir puan olarak hesaplanır; A en yüksek, D ise en düşük değerdir.
Özgüllük Bileşenleri
Dört sütun:
- A: Satır içi stiller (style="" özniteliği) = 1,0,0,0
- B: ID seçicileri (#id) = 0,1,0,0
- C: Sınıf seçicileri (.class), öznitelik seçicileri, sözde sınıflar = 0,0,1,0
- D: Tür (öğe) seçicileri, sözde öğeler = 0,0,0,1
Özgüllük Örnekleri
Özgüllüğü hesaplama:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Evrensel Seçicinin Özgüllüğü Yoktur
Evrensel seçici *, birleştiriciler (+, >, ~, boşluk) ve :where() sözde sınıfı özgüllüğe sıfır (0,0,0,0) katkıda bulunur.
Satır İçi Stiller Kazanır
Satır içi stiller (style="" özniteliği) en yüksek özgüllüğe (1,0,0,0) sahiptir. Bir stil sayfası kuralından bunları yalnızca !important geçersiz kılabilir.
Özgüllük Puanlarını Karşılaştırma
Soldan sağa karşılaştırın. Puanların farklı olduğu ilk sütun kazananı belirler. ID sütunu hemen kazandığı için (0,1,0,0), (0,0,99,99) değerinden üstündür.
:is(), :not() ve :has() Özgüllüğü
:is(), :not() ve :has(), en özgül bağımsız değişkenlerinin özgüllüğünü alır:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>nth-child Özgüllüğü
:nth-child(), :first-child, :hover ve diğer sözde sınıfların tümü (0,0,1,0), yani sınıf düzeyinde özgüllük ekler.
Sözde Öğe Özgüllüğü
::before, ::after, ::first-line vb. (0,0,0,1), yani öğe düzeyinde özgüllük ekler. Bunlar D sütununda yer alır.
Özgüllük Kalıtım Değildir
Özgüllük, her özellik ve öğe için ayrı ayrı hesaplanır. Daha yüksek özgüllüğe sahip bir kural, belirli bir özellik için kazanır; ancak yüksek özgüllüğe sahip bir üst öğeden miras alınan değerler, alt öğeye doğrudan uygulanan daha özgül kurallara üstün gelemez.
Özgüllük Hesaplama Araçları
Özgüllüğü doğrulamak için specificity.keegan.st gibi çevrimiçi araçları veya tarayıcı DevTools'unu kullanın. DevTools'ta Stiller panelindeki üzeri çizili stiller, daha özgül bir kuralın kazandığını gösterir.
Hızlı Kontrol
Hangi seçicinin özgüllüğü daha yüksektir: #sidebar .link veya .nav .nav-item .nav-link.active?
Özet
Özgüllük puanları (A, B, C, D) şeklindedir: satır içi stiller, ID'ler, sınıflar/öznitelikler/sözde sınıflar, öğeler/sözde öğeler. Soldan sağa karşılaştırın; farklı olan ilk sütun kazanır. :where() her zaman sıfır katkıda bulunur. Bir ID, sınıf seçicilerinin herhangi bir sayısından üstündür. Hangi kuralların neden kazandığını görmek için DevTools'un Stiller panelini kullanın.
Sıkça Sorulan Sorular
“Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge” dersi ücretsiz mi?
Evet — “Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge” dersinde ne öğreneceğim?
Özgüllük puanlarını hesaplayın ve herhangi bir stil çatışmasında hangi kuralın kazanacağını öngörün. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Özgüllük Hesaplama: Satır İçi Stil, ID, Class, Öge
- Kaskat: Kaynak ve Sıra
- !important: Ne Zaman ve Neden Kullanılmamalı
- Kalıtım ve all Özelliği