CSS özgüllüğündeki puanlar nasıl hesaplanır

Özgüllüğü araştırırken bu bloga rastladım - http://www.htmldog.com/guides/cssadvanced/specificity/

Özgüllüğün CSS için bir puanlama sistemi olduğunu belirtir. Bize öğelerin 1 puan, sınıfların 10 puan ve kimliklerin 100 puan değerinde olduğunu söylüyor. Ayrıca, bu noktaların toplandığını ve toplam miktarın bu seçicinin özgüllüğü olduğunu söyler.

Örneğin:

body = 1 nokta
gövde. sarmalayıcı = 11 puan
gövde. sarmalayıcı # kapsayıcı = 111 puan

Dolayısıyla, bu noktaları kullanarak, aşağıdaki CSS ve HTML'nin metnin mavi olmasına neden olmasını bekliyorum:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

100 puana eşit olan 1 kimlik ile karşılaştırıldığında 15 sınıf 150 puana eşitken metin neden kırmızıdır?

Görünüşe göre puanlar sadece toplanmıyor; sıralı. Bununla ilgili daha fazla bilgiyi buradan okuyun - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Bu, seçicimizdeki sınıfların = 0,0,15,0OR olduğu anlamına mı geliyor 0,1,5,0?

(Böyle kimlik seçicinin özgüllük görünüyor BİLMEK olarak içgüdülerim, eski söyle: 0,1,0,0)

Pekka cevabı ise pratik olarak muhtemelen konu hakkında düşünmek için en iyi yolu doğru ve.

Bununla birlikte, birçoğunun daha önce de belirttiği gibi, W3C CSS önerisi "Üç sayıyı abc (geniş tabanlı bir sayı sisteminde) birleştirmenin özgüllüğü verdiğini" belirtir. Yani içimdeki inek bu üssün ne kadar büyük olduğunu bulmalıydı.

"Son derece büyük bir taban" kullanılmıştır (4 en çok kullanılan tarayıcılar tarafından en azından çıkıyor ^* ) Bu standart algoritma 256 ya da 2'dir uygulamak ⁸ .

Bu ne anlama geliyor 0 kimlikleri ve 256 sınıf adlarla belirtilen bir stil olmasıdır edecek sadece 1 id ile belirtilen bir stil aşırı binmek. Bunu bazı kemanlarla test ettim:

• 255 sınıf, 1 kimliği geçersiz kılmak için yeterli değildir
• ... ama 256 sınıfları şunlardır 1 id geçersiz kılmak için yeterli

• ... ve 256 etiket adı , 1 sınıf adını geçersiz kılmak için yeterlidir

• ... ancak ne yazık ki 256 kimlik, 1 satır içi stili geçersiz kılmak için yeterli değildir (Güncelleme 2012/8/15 - kullanmanız gerekecek !important)

Yani, etkin bir şekilde bir "puan sistemi" var, ancak bu 10 tabanlı değil. 256 tabanlı. İşleyişi şöyle:

(2 ⁸ ) ² veya 65536,
+ (2 ⁸ ) ¹ veya 256 seçicideki kimlik sayısının çarpımı, seçicideki sınıf adlarının sayısı
+ (2 ⁸ ) ⁰ veya 1, çarpı etiket sayısı- seçicideki isimler

Bu, kavramı iletmek için zarfın arkası egzersizler için pek pratik değildir.
Muhtemelen bu konudaki makalelerin temel 10'u kullanmasının nedeni budur.

***** [Opera 2 ¹⁶ kullanıyor (karlcow'un yorumuna bakın). Diğer bazı seçici motorlar sonsuzluğu kullanır - etkili bir şekilde puansız sistem (Simon Sapin'in yorumuna bakın).]

Güncelleme, Temmuz 2014:
Blazemonger'ın yılın başlarında belirttiği gibi, webkit tarayıcıları (krom, safari) artık 256'dan daha yüksek bir taban kullanıyor gibi görünüyor. Belki 2 ¹⁶ , Opera gibi? IE ve Firefox hala 256 kullanıyor.

İyi soru.

Kesin olarak söyleyemem - bulabildiğim tüm makaleler birden fazla sınıf örneğinden kaçınıyor, mesela burada - ancak bir sınıf seçici ile bir kimlik arasındaki özgüllüğü karşılaştırmaya gelince , sınıfın bir 15ne kadar ayrıntılı olursa olsun , yalnızca değeri .

Bu, özgüllüğün nasıl davrandığı konusundaki deneyimime uyuyor.

Ancak, bazı sınıf yığınları olmalıdır çünkü

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

şundan daha spesifik

.o

Sahip olduğum tek açıklama, yığılmış sınıfların özgüllüğünün yalnızca birbirine göre hesaplanması, kimliklere göre hesaplanmamasıdır.

Güncelleme : Şimdi yarı yoldan anlıyorum. Puan sistemi değildir ve 15 puanlık sınıflar hakkındaki bilgiler yanlıştır. Çok iyi izah 4 bölümlük numaralama sistemidir burada .

Başlangıç ​​noktası 4 rakamdır:

style  id   class element
0,     0,   0,    0

W3C'nin özgüllük açıklamasına göre , yukarıda belirtilen kurallar için özgüllük değerleri şunlardır:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

bu çok büyük (tanımsız?) tabanı olan bir numaralandırma sistemidir.

Anladığım kadarıyla, taban çok büyük olduğundan, 4. sütundaki hiçbir sayı 3. sütunda> 0 sayısını geçemez, 2. sütun 1. sütun için aynıdır .... Bu doğru mu?

Matematiği benden daha iyi kavrayan birinin numaralandırma sistemini açıklayıp açıklayamayacağını ve tek tek öğeler 9'dan büyük olduğunda onu ondalık sayıya nasıl dönüştürebileceğini merak ediyorum.

Mevcut Seçiciler Seviye 4 Çalışma Taslağı , CSS'de Özgüllüğü tanımlamak için iyi bir iş çıkarmaktadır:

Özgünlükler, üç bileşenin sırayla karşılaştırılmasıyla karşılaştırılır: daha büyük bir A değeriyle özgüllük daha belirgindir; iki A değeri bağlıysa, daha büyük bir B değerine sahip özgüllük daha belirgindir; iki B değeri de bağlanırsa, daha büyük c değerine sahip özgüllük daha belirgindir; tüm değerler bağlıysa, iki özellik eşittir.

Bu, A, B ve C değerlerinin tamamen birbirinden bağımsız olduğu anlamına gelir.

15 sınıf, seçicinize 150'lik bir özgüllük puanı vermez, ona 15'lik bir B değeri verir . Tek bir A değeri, bunun üstesinden gelmek için yeterlidir.

Bir metafor olarak, 1 büyük ebeveyn, 1 ebeveyn ve 1 çocuktan oluşan bir aile hayal edin. Bu 1,1,1 olarak temsil edilebilir . Ebeveynin 15 çocuğu varsa, bu onları aniden başka bir ebeveyn yapmaz ( 1,2,0 ). Bu, ebeveynin sadece 1 çocuğa sahip olduğundan çok daha fazla sorumluluğa sahip olduğu anlamına gelir ( 1,1,15 ). ;)

Aynı dokümantasyon ayrıca şunu söylemeye devam ediyor:

Depolama sınırlamaları nedeniyle, uygulamaların A , B veya c boyutunda sınırlamaları olabilir . Öyleyse, sınırın üzerindeki değerler bu sınıra sabitlenmeli ve aşılmamalıdır.

Bu, Faust'un yanıtında sunulan sorunun üstesinden gelmek için eklendi , böylece 2012'de CSS uygulamaları, özgüllük değerlerinin birbirine taşmasına izin verdi.

2012'de çoğu tarayıcı 255'lik bir sınırlama uyguladı, ancak bu sınırlamanın aşılmasına izin verildi. 255 sınıfın A, B, c özgüllük puanı 0,255,0 , ancak 256 sınıf aştı ve A, B, c puanı 1,0,0 idi . Birden B değerimiz A değerimiz oldu. Seçiciler Seviye 4 belgeleri, sınırın asla aşılmasına izin verilemeyeceğini belirterek bu sorunu tamamen aydınlatır. Bu uygulama ile hem 255 hem de 256 sınıf aynı A, B, c puanı 0,255,0 olacaktır .

Faust'un cevabında verilen sorun o zamandan beri çoğu modern tarayıcıda düzeltildi .

Şu anda CSS Mastery: Advanced Web Standards Solutions kitabını kullanıyorum .

Bölüm 1, sayfa 16 diyor ki:

Bir kuralın ne kadar spesifik olduğunu hesaplamak için, her seçici türüne sayısal bir değer atanır. Bir kuralın özgüllüğü daha sonra seçicilerinin her birinin değeri toplanarak hesaplanır. Ne yazık ki, özgüllük 10 bazında değil, yüksek, belirtilmemiş bir baz sayı olarak hesaplanır. Bu, ID seçici gibi oldukça spesifik bir seçicinin, tip seçiciler gibi daha az spesifik birçok seçici tarafından asla geçersiz kılınmamasını sağlamak içindir.

(vurgu benim) ve

Bir seçicinin özgüllüğü dört kurucu düzeye ayrılır: a, b, c ve d.

• stil bir satır içi stil ise, a = 1
• b = toplam id seçici sayısı
• c = sınıf, sözde sınıf ve öznitelik seçicilerinin sayısı
• d = tür seçicilerinin ve sözde öğe seçicilerinin sayısı

Hesaplamayı genellikle 10 tabanında yapabileceğinizi söylemeye devam eder, ancak yalnızca tüm sütunların değerleri 10'dan küçükse.

Örneklerinizde kimlikler 100 puan değerinde değil; her biri [0, 1, 0, 0]puan değerindedir . Bu nedenle, bir id 15 sınıfı yener çünkü yüksek tabanlı sayı sistemindekinden [0, 1, 0, 0]daha büyüktür [0, 0, 15, 0].

Özgüllük sıralamasının Olimpiyat Oyunları madalya tablosu ile karşılaştırılmasını seviyorum (altın ilk yöntem - önce altın madalya, ardından gümüş ve ardından bronz sayısına göre).

Sorunuzla da çalışır (bir özgüllük grubunda çok sayıda seçici). Özgüllük her grubu ayrı ayrı ele aldı. Gerçek dünyada çok nadiren bir düzineden fazla seçiciye sahip bir durum gördüm).

Ayrıca burada oldukça iyi bir özgüllük hesaplayıcısı da mevcuttur . Oraya örneğinizi (#a ve .a .b .c .d .e .f .g .h .i .j .k .l .m .n .o) koyabilir ve sonuçları görebilirsiniz.

Rio 2016 Olimpiyat Oyunları madalya tablosu örneği şuna benziyor

Blog açıklamasının doğru olduğuna inanmıyorum. Spesifikasyon burada:

http://www.w3.org/TR/CSS2/cascade.html#specificity

Bir sınıf seçiciden gelen "Puanlar", bir "id" seçiciden daha önemli olamaz. Sadece böyle çalışmıyor.

Şunu söylemek isterim:

Element < Class < ID

Bence, sadece aynı şeyden çoksa, ne aldığınıza bağlı olarak birikirler. Dolayısıyla, bir Sınıf her zaman öğeyi ve kimliği her zaman Sınıfın üzerine çıkarır, ancak 3'ün mavi ve 1'in kırmızı olduğu 4 öğeden hangisine indiğinde mavi olur.

Örneğin:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

Kırmızı olmalı.

Örneğe bakın http://jsfiddle.net/RWFWq/

"5'liler kırmızı derse ve 3 mavi iyi derse kırmızı olurum"