Punkty w specyfice CSS

Dobre pytanie.

Nie mogę powiedzieć na pewno - wszystkie artykuły, które udało mi się znaleźć, unikają przykładu wielu klas, np. tutaj - ale zakładam, że jeśli chodzi o porównanie specyfiki pomiędzy selektorem klasy A ID, klasa jest obliczana z wartością 15, bez względu na to, jak szczegółowa jest.

Jednak musi być jakieś układanie klas ponieważ

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

Jest bardziej szczegółowe niż

.o

Jedyne wyjaśnienie, jakie mam, to to, że specyfika klas ułożonych jest obliczana tylko względem siebie, ale nie względem IDs.

Update: i połowicznie dostać go teraz. Nie jest to system punktowy, a informacja o klasach ważących 15 punktów jest błędna. Jest to 4-częściowy system numeracji bardzo dobrze wyjaśniony tutaj .

Punktem wyjścia są 4 cyfry:

style  id   class element
0,     0,   0,    0

Zgodnie z W3C Wyjaśnienie specyficzności , wartości szczegółowe dla wyżej wymienionych zasad są następujące:

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

Jest to system numeracji z bardzo dużym (nieokreślonym?) baza.

Rozumiem, że ponieważ baza jest bardzo duża, żadna liczba w kolumnie 4 nie może pokonać liczby > 0 w kolumnie 3, to samo dla kolumny 2, kolumny 1 .... Czy to prawda?

Byłbym ciekaw, czy ktoś, kto zna się lepiej na matematyce niż ja, mógłby wyjaśnić ten system numeracji i jak go przekształcić do dziesiętnego, gdy poszczególne elementy są większe niż 9.

Obecnie korzystam z książki CSS Mastery: Advanced Web Standards Solutions.

Rozdział 1, Strona 16 mówi:

Aby obliczyć, jak specyficzna jest reguła, każdy typ selektora jest przypisany wartość liczbowa. Specyficzność reguły jest wówczas obliczana przez dodawanie wartości każdego z selektorów. niestety, specyficzność nie jest obliczana w bazie 10, ale wysoka, nieokreślona, baza numer. Ma to na celu zapewnienie, że bardzo specyficzny selektor, taki jako Selektor ID, nigdy nie jest zastępowany przez wiele mniej specyficznych selektorów, takich jak selektory typów.

(podkreślenie moje) i

Specyficzność selektora jest podzielona na cztery składowe poziomy: a, b, c i D.

• jeśli styl jest stylem inline, to a = 1
• b = całkowita liczba selektorów id
• c = Liczba selektorów klasy, pseudoklasy i atrybutów
• d = Liczba typu selektory i selektory pseudoelementów

Mówi się dalej, że często można wykonać obliczenia w bazie 10, ale tylko wtedy, gdy wszystkie kolumny mają wartości mniejsze niż 10.

W Twoich przykładach identyfikatory nie są warte 100 punktów; każdy jest wart [0, 1, 0, 0] punktów. Dlatego jeden identyfikator bije 15 klas, ponieważ [0, 1, 0, 0] jest większy niż [0, 0, 15, 0] w systemie liczb o wysokiej bazie.

Aktualny Selektor poziomu 4 roboczy szkic dobrze opisuje specyfikę w CSS:

Specyficzność porównuje się poprzez porównanie trzech składników w kolejności: specyficzność z większą wartością a jest bardziej specyficzna; Jeśli dwie wartości a są powiązane, to specyficzność z większą wartością B jest bardziej specyficzna; Jeśli dwie wartości {6]}B są również powiązane, to specyficzność z większą wartością {6]} c jest bardziej specyficzna; jeśli wszystkie wartości są powiązane, obie specyfiki są sobie równe.

Oznacza to, że wartości A, B I C są całkowicie niezależne od siebie.

15 klas nie daje selektorowi 150 punktów, daje mu B wartość 15. Jedna wartość a wystarczy, aby to pokonać.

Jako metafora wyobraź sobie rodzinę składającą się z 1 dziadka, 1 rodzica i 1 dziecka. Można to przedstawić jako 1,1,1. Jeśli rodzic ma 15 dzieci, to nie czyni ich nagle kolejnym rodzicem (1,2,0). Oznacza to, że rodzic ma o wiele więcej odpowiedzialności niż miał z zaledwie 1 dzieckiem (1,1,15). ;)

Ta sama dokumentacja również mówi:

Ze względu na ograniczenia pamięci, implementacje mogą mieć ograniczenia wielkości A, B lub c . Jeśli tak, wartości wyższe niż limit muszą być zaciśnięte do tego limitu, a nie przepełnienie.

To zostało dodane aby rozwiązać problem przedstawiony w odpowiedzi Fausta, według której implementacje CSS w 2012 roku pozwoliły na przepełnienie wartości specyficzności.

W 2012 roku większość przeglądarek wprowadziła ograniczenie 255, ale ograniczenie to było dozwolone do przepełnienia. 255 klas miało A,B,c 0,255,0, ale 256 klas przepełniło się i miało A,B,c wynik 1,0,0. Nagle nasza B wartość stała się naszą a {7]} wartością. Na Dokumentacja selektorów poziomu 4 całkowicie napromieniowuje ten problem, stwierdzając, że limit nigdy nie może być dopuszczony do przepełnienia. Z tą implementacją, obie klasy 255 i 256 będą miały ten samA,B,c wynik 0,255,0.

Problem podany w odpowiedzi Fausta został naprawiony w większości nowoczesnych przeglądarek.

Lubię porównywać ranking specyficzny do tabeli medalowej Igrzysk Olimpijskich (najpierw złoto-najpierw na podstawie liczby złotych medali, potem srebro, a potem brąz).

Działa również z twoim pytaniem (ogromna liczba selektorów w jednej grupie specyficzności). Specyficzność rozpatrywana oddzielnie dla każdej grupy. W realu bardzo rzadko widziałem przypadek z kilkunastu selektorów).

Dostępny jest również całkiem dobry kalkulator specyficzności tutaj . Możesz umieścić swój przykład (#a i .a .b .c .d .B .f .B .h .i .j .1000000l .m .N.o) tam i zobaczyć wyniki.

Przykładowa tabela medalowa Igrzysk Olimpijskich Rio 2016 wygląda następująco

Nie wierzę, że Wyjaśnienie bloga jest poprawne. Specyfikacja jest tutaj:

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

"punkty" z selektora klas nie mogą sumować się jako ważniejsze niż selektor "id". To tak nie działa.

Powiedziałbym, że:

Element < Class < ID

Myślę, że układają się w zależności od tego, co dostajesz, jeśli jest wielokrotnością tego samego. Tak więc Klasa będzie zawsze nad elementem, A ID zawsze nad klasą, ale jeśli spadnie do tego, który z 4 elementów, gdzie 3 jest na niebiesko, a 1 na czerwono, będzie niebieski.

Na Przykład:

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

 .m .n .o
{
color blue;
}

Zobacz przykład http://jsfiddle.net/RWFWq/

"if 5things say red and 3 say blue well ima go czerwony "