Bagaimanakah kekhususan CSS dikira?

Question

Semasa meneliti kekhususan, saya terjumpa blog ini - http://www.htmldog.com/guides/cssadvanced/specificity/

Ia menyatakan bahawa kekhususan ialah sistem pemarkahan untuk CSS. Ia memberitahu kita bahawa nilai elemen ialah 1 mata, nilai kelas ialah 10 mata, dan nilai ID ialah 100 mata. Ia seterusnya mengatakan bahawa markah ini ditambah dan jumlah markah ialah kekhususan pemilih.

Contohnya:

badan = 1 mata

badan .pembungkus = 11 mata

badan .pembungkus #bekas = 111 mata

Jadi, menggunakan skor ini, saya menjangkakan CSS dan HTML berikut akan menyebabkan teks bertukar menjadi biru:

#a {
    warna: merah;
}

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

  

    

      

        

          

            

              

                

                  

                    

                      

                        

                          

                            

                              Ini sepatutnya berwarna biru.
                            
                          
                        
                      
                    
                  
                
              
            
          
        
      
    
  





Mengapakah teks berwarna merah apabila 15 kelas bersamaan 150 mata dan 1 ID bersamaan 100 mata? 

Jelas sekali, markah ini bukan sahaja bersambung; Ketahui lebih lanjut di sini - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html 

Adakah ini bermakna kelas dalam pemilih kami = 0,0,15,0 atau 0,1,5,0? 

(Intuisi saya memberitahu saya ia sepatutnya yang pertama, kerana kita tahu bahawa kekhususan pemilih ID adalah seperti ini: 0,1,0,0)

Answer 1

Soalan yang bagus.

Saya tidak pasti - semua artikel yang saya temui mengelakkan contoh berbilang kelas, seperti di sini - tetapi saya mengandaikan bahawa apabila ia datang untuk membandingkan kekhususan antara pemilih kelas dan ID, kelas akan hanya dinilai sebagai nilai A 15, tidak kira betapa terperincinya.

Ini konsisten dengan pengalaman saya dengan tingkah laku seksual tertentu.

Walau bagaimanapun, mesti mempunyai beberapa susunan kelas kerana

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

Lebih baik daripada

.o

Untuk lebih spesifik, satu-satunya penjelasan saya ialah kekhususan kelas bertindan hanya dikira antara satu sama lain, bukan terhadap ID.

KEMASKINI: Saya agak faham sekarang. Ini bukan sistem mata dan maklumat tentang pemberat kelas ialah 15 mata adalah tidak betul. Ini adalah sistem penomboran 4 bahagian yang dijelaskan dengan sangat baik yang boleh didapati di sini.

Titik permulaan ialah 4 nombor:

style  id   class element
0,     0,   0,    0

Menurut penjelasan W3C tentang kekhususan, nilai kekhususan peraturan di atas ialah:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ...请参见评论

Ini adalah sistem penomboran dengan asas yang sangat besar (tidak ditentukan?).

Pemahaman saya ialah kerana asasnya sangat besar, tiada nombor dalam lajur 4 boleh mengalahkan nombor yang lebih besar daripada 0 dalam lajur 3, perkara yang sama berlaku untuk lajur 2, dan perkara yang sama berlaku untuk lajur 1.... Adakah ini pemahaman betul?

Saya tertanya-tanya jika sesiapa yang mempunyai pemahaman yang lebih baik tentang matematik boleh menerangkan sistem penomboran ini dan cara menukarnya kepada perpuluhan apabila elemen individu lebih besar daripada 9.

Answer 2

Jawapan Pekka adalah betul dari segi fakta dan mungkin cara terbaik untuk memikirkan soalan ini.

Walau bagaimanapun, seperti yang telah ditunjukkan oleh ramai pihak, Pengesyoran CSS W3C menyatakan: “Menggabungkan tiga nombor a-b-c (dalam sistem nombor asas besar) memberikan kekhususan.

Ternyata "asas yang sangat besar" (oleh sekurang-kurangnya 4 pelayar yang paling biasa digunakan ^*) yang melaksanakan algoritma standard ini ialah 256 atau 2⁸.

Ini bermakna gaya yang ditentukan dengan 0 id dan 256 nama kelas akan mengatasi gaya yang ditentukan dengan hanya 1 id. Saya mengujinya dengan beberapa biola:

• 255 nama kelas tidak cukup untuk menampung 1 id

• ...tetapi 256 nama kelas sudah cukup untuk menampung 1 id

• ...dan 256 nama tag sudah cukup untuk menampung 1 nama kelas

• ...tetapi, malangnya 256 id tidak mencukupi untuk menampung 1 gaya sebaris (kemas kini 2012/8/15 -- anda perlu menggunakan !important)

Jadi, sebenarnya ada "sistem mata", tetapi ia bukan berdasarkan asas 10, tetapi berdasarkan asas 256. Begini cara ia berfungsi:

(2⁸)² atau 65536, didarab dengan bilangan id dalam pemilih

• (2⁸)¹ atau 256, didarab dengan bilangan nama kelas dalam pemilih
• (2⁸)⁰ atau 1, didarab dengan bilangan nama tag dalam pemilih

Ini tidak begitu praktikal untuk komunikasi konsep mudah.
Ini mungkin sebab artikel mengenai topik ini sentiasa menggunakan asas 10.

***** [Opera menggunakan 2¹⁶ (lihat komen karlcow). Sesetengah enjin pemilih lain menggunakan infinity - berkesan tiada sistem titik (lihat komen Simon Sapin). ]

Dikemas kini, Julai 2014:
Seperti yang dinyatakan oleh Blazemonger awal tahun ini, pelayar webkit (Chrome, Safari) kini kelihatan menggunakan pangkalan yang lebih tinggi daripada 256. Mungkin 2¹⁶, seperti Opera? IE dan Firefox masih menggunakan 256.

Dikemas kini, Mac 2021:
Firefox tidak lagi menggunakan 256 sebagai asas.