Ta odpowiedź jest dla absolutnie początkujących. Jeśli chcesz uzyskać przegląd tej odpowiedzi, przeczytaj moją drugą odpowiedź.
Kaskadowanie to proces łączenia różnych arkuszy stylów i rozwiązywania konfliktów między różnymi regułami CSS i deklaracjami, gdy więcej niż jedna reguła ma zastosowanie do określonego elementu . Ponieważ, jak zapewne już wiesz, deklaracja określonej właściwości stylu, takiej jak rozmiar czcionki, może pojawić się w kilku arkuszach stylów, a także kilka razy w jednym arkuszu stylów.
Aby zrozumieć kaskadowanie, musisz zacząć od fazy analizy CSS, ponieważ w fazie analizowania pierwszym krokiem jest rozwiązanie sprzecznych deklaracji CSS, a drugim krokiem jest przetworzenie końcowych wartości CSS.
Teraz CSS może również pochodzić z różnych źródeł. Najpopularniejszym jest CSS, który piszemy my programiści. Te deklaracje, które umieszczamy w naszych arkuszach stylów, nazywane są deklaracjami autorów. Innym źródłem mogą być deklaracje użytkownika, czyli CSS pochodzące od użytkownika. Na przykład, gdy użytkownik zmieni domyślny rozmiar czcionki w przeglądarce, to jest to CSS użytkownika, a na koniec istnieją deklaracje domyślnej przeglądarki.
Na przykład, jeśli umieścimy tag kotwicy w naszym kodzie HTML dla łącza, a następnie w ogóle go nie stylizujemy, zwykle będzie on renderowany niebieskim tekstem i podkreślony, prawda. Nazywa się to CSS klienta użytkownika, ponieważ jest ustawiany przez przeglądarkę. Zatem kaskada łączy deklaracje CSS pochodzące z tych wszystkich różnych źródeł, ale w jaki sposób kaskada faktycznie rozwiązuje konflikty, gdy ma zastosowanie więcej niż jedna reguła?
Cóż, to, co robi, to przyjrzenie się ważności, specyficzności selektora i kolejności źródła sprzecznych deklaracji, aby określić, która z nich ma pierwszeństwo, a oto jak to działa. Po pierwsze, kaskada zaczyna się od podania sprzecznych deklaracji o różnej wadze w zależności od tego, gdzie zostały zadeklarowane w ich źródle. Najważniejsze deklaracje to deklaracje użytkownika oznaczone słowem kluczowym important.
Drugą najważniejszą deklaracją są deklaracje autorskie oznaczone jako ważne. Po trzecie, zwykłe deklaracje autora, potem zwykłe deklaracje użytkownika, a na końcu te najmniej istotne to deklaracje domyślnej przeglądarki, co właściwie ma sens, że możemy łatwo nadpisać te deklaracje przychodzące domyślnie z przeglądarki.
Teraz wiele razy będziemy mieć kilka sprzecznych reguł w naszych autorskich arkuszach stylów bez żadnego ważnego słowa kluczowego. To jest właściwie najbardziej powszechny scenariusz iw tym przypadku wszystkie deklaracje mają dokładnie to samo znaczenie. Co się dzieje w tym przypadku? W takim przypadku kaskada oblicza i porównuje specyfikę selektorów deklaracji i tak to działa.
Style wbudowane mają najwyższą specyficzność, po których następują identyfikatory, następnie klasy, pseudoklasy i selektory atrybutów, a na końcu najmniej określony element i selektor pseudoelementów. Tak więc, gdy mamy sprzeczne deklaracje o takiej samej wadze, jak widzieliśmy na ostatnim slajdzie, obliczamy specyficzność ich selektora na podstawie priorytetów, które właśnie pokazałem, ale zobaczmy, jak właściwie obliczamy specyfikacje na małym przykładzie, to zawsze jest najlepsze, prawda.
Z powyższego przykładu, wszystkie te deklaracje mają takie samo znaczenie, ponieważ wszystkie są deklaracjami autora. Obliczmy więc ich specyfikę selektora, aby dowiedzieć się, czy kolor tła będzie niebieski, zielony, fioletowy czy żółty, i tak to robimy. Specyfika to nie tylko jedna liczba, ale jedna liczba dla każdej z czterech kategorii, które pokazałem wcześniej. Style w wierszu, identyfikatory, klasy, pseudoelementy i atrybuty, a na końcu elementy i dla każdego z nich zliczamy liczbę wystąpień w selektorze.
Więc tutaj, w selektorze pierwszym, nie mamy oczywiście żadnych stylów wbudowanych, ponieważ styl wbudowany musi być napisany w HTML, co nie ma miejsca w tym przypadku, więc jest to zero. Nie mamy tutaj również identyfikatorów, więc znowu jest to zero, ale mamy jedną klasę, klasę przycisku. Tak więc dla kategorii klas mamy jedynkę i wreszcie nie ma tu selektora elementu, więc dla tej również zero, i to wszystko. Specyficzność selektora wynosi zero, zero, jeden, zero.
Teraz porównajmy to z innymi. Następny również nie jest stylem wbudowanym, więc zero dla pierwszego. Teraz mamy tutaj selektor ID dla identyfikatora nawigacyjnego, tak, więc jest to jeden dla ID. Mamy również dwie klasy, pociągnij w prawo i przycisk, więc jest to dwoje dla kategorii klas, a na koniec są tu również dwa selektory elementów. Element nav i element div, co oznacza, że jest to również dwa dla kategorii elementów. Ostatecznie specyficzność selektora wynosi zero, jeden, dwa, dwa, co jest właściwie bardzo specyficznym selektorem.
Selektor numer trzy jest bardzo prosty. To tylko selektor elementu, więc specyficzność wynosi zero, zero, zero, jeden.
Teraz ostatni, selektor numer cztery. Najpierw znowu mamy identyfikator nawigacyjny, więc jest to jeden dla identyfikatora. Następnie mamy klasę, klasę przycisku, a także pseudoklasę, czyli najechanie kursorem, co daje w sumie dwie dla kategorii klas. Ponieważ istnieje również jeden selektor elementu, końcowa specyficzność wynosi zero, jeden, dwa, jeden.
Teraz zobaczmy, jak właściwie używamy tych liczb, aby dowiedzieć się, który z selektorów ma zastosowanie. Zaczynamy przyglądać się liczbom od lewej do prawej, zaczynając od najbardziej szczegółowej kategorii, stylów wbudowanych. Jeśli istnieje selektor z jednym dla stylów wbudowanych, wygrywa z wszystkimi innymi selektorami, ponieważ jest to najbardziej szczegółowa kategoria. Cóż, tak nie jest w tym przypadku, więc przejdźmy do identyfikatorów. Widzimy, że selektory dwa i cztery mają tutaj jedynkę, podczas gdy inne mają zero, więc te z zerem są poza grą, ponieważ są mniej szczegółowe niż selektory dwa i cztery te z identyfikatorami.
Teraz, ponieważ oba selektory mają po jednym w kategorii IDs, musimy przejść dalej i sprawdzić klasy. Obaj mają dwójkę w tej kategorii nadal remisują między nimi, a na koniec w kategorii elementów selektor dwa ma dwa, podczas gdy selektor czwarty ma tylko jeden, więc mamy tutaj zwycięzcę. Selektor numer dwa jest najbardziej szczegółowym selektorem ze wszystkich, więc nada naszemu przyciskowi zielone tło.34 Wartość deklaracji wygrywającej nazywana jest wartością kaskadową, ponieważ jest wynikiem kaskady.
Zaczynamy więc od zestawu zadeklarowanych wartości, w tym przypadku niebieski, zielony, fioletowy i żółty jedna z nich wygrywa i staje się wartością kaskadową, która w naszym przykładzie jest zielona.
Teraz wyobraź sobie, że sektor czwarty również miał dwa elementy, wtedy oba selektory, drugi i czwarty, miałyby dokładnie taką samą specyfikę, prawda. Więc co się dzieje w tym przypadku i obiecuję, że to już prawie koniec, dobrze. Cóż, jeśli w tym momencie nadal występuje remis, to ostatnia deklaracja CSS zapisana w kodzie będzie miała zastosowanie. Więc znowu, jeśli wszystko jest równe, jeśli wszystkie selektory deklaracji mają tę samą specyfikę, to jest to po prostu ostatnia deklaracja, która zostanie użyta do nadania stylu wybranemu elementowi.