Jaka jest kolejność pierwszeństwa dla CSS?

Próbuję dowiedzieć się, dlaczego jedna z moich klas css wydaje się zastępować drugą (a nie na odwrót)

Tutaj mam dwie klasy css

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

i moim zdaniem dzwonię

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

Czcionka (nakładający się element) jest wyświetlana jako 10 pikseli zamiast 20 - czy ktoś mógłby wyjaśnić, dlaczego tak jest?

Istnieje kilka zasad (stosowanych w tej kolejności):

1. inline css (atrybut stylu html) przesłania reguły css w tagu stylu i pliku css
2. bardziej szczegółowy selektor ma pierwszeństwo przed mniej szczegółowym
3. reguły, które pojawiają się później w kodzie, zastępują wcześniejsze reguły, jeśli obie mają taką samą specyfikę.
4. Reguła CSS z !importantzawsze ma pierwszeństwo.

W twoim przypadku obowiązuje zasada 3.

Specyfika dla pojedynczych selektorów od najwyższego do najniższego:

• identyfikatory (przykład: #mainwybiera <div id="main">)
• klas (np .: .myclass), selektory atrybutów (np .: [href=^https:]) i pseudo-klas (np .: :hover)
• elementy (np .: div), a pseudo-elementów (np .: ::before)

Aby porównać specyficzność dwóch połączonych selektorów, porównaj liczbę wystąpień pojedynczych selektorów każdej z powyższych grup specyficzności.

Przykład: porównaj #nav ul li a:hoverz#nav ul li.active a::after

• policz liczbę selektorów identyfikatora: jest jeden dla każdego ( #nav)
• policz liczbę selektorów klas: jest jeden dla każdego ( :hoveri .active)
• policzyć liczbę selektorów elementów: są 3 ( ul li a) dla pierwszego i 4 dla drugiego ( ul li a ::after), więc drugi selektor kombinowany jest bardziej szczegółowy.

Dobry artykuł o specyfice selektora CSS .

Oto kompilacja kolejności stylów CSS na diagramie, na którym reguły CSS mają wyższy priorytet i mają pierwszeństwo przed resztą:

Zastrzeżenie : razem z moim zespołem opracowaliśmy ten artykuł wraz z wpisem na blogu ( https://vecta.io/blog/definitive-guide-to-css-styling-order ), który moim zdaniem przyda się wszystkim front-endowi deweloperzy.

To, na co tutaj patrzymy, nazywa się specyficznością, jak stwierdza Mozilla :

Specyfika to sposób, za pomocą którego przeglądarki decydują, które wartości właściwości CSS są najbardziej odpowiednie dla elementu i dlatego zostaną zastosowane. Specyfika opiera się na regułach dopasowania, które składają się z różnego rodzaju selektorów CSS.

Specyfika to waga przypisana danej deklaracji CSS, określona przez liczbę każdego typu selektora w pasującym selektorze. Gdy wiele deklaracji ma taką samą specyficzność, ostatnia deklaracja znaleziona w CSS jest stosowana do elementu. Specyfika ma zastosowanie tylko wtedy, gdy ten sam element jest objęty wieloma deklaracjami. Zgodnie z regułami CSS, bezpośrednio docelowe elementy zawsze będą miały pierwszeństwo przed regułami, które element dziedziczy po swoim przodku.

Podoba mi się wyjaśnienie 0-0-0 na https://specifishity.com :

Całkiem opisowy obraz !importantdyrektywy! Ale czasami jest to jedyny sposób na zastąpienie styleatrybutu inline . Dlatego najlepszą praktyką jest unikanie obu.

Po pierwsze, na podstawie twojej @extenddyrektywy wydaje się, że nie używasz czystego CSS, ale preprocesora, takiego jak SASS os Stylus.

Teraz, kiedy mówimy o „porządku pierwszeństwa” w CSS, obowiązuje zasada ogólna : stosowane są wszelkie reguły ustawione po innych regułach (odgórnie). W twoim przypadku, po prostu określając .smallboxpo .smallbox-paysummarybyłbyś w stanie zmienić pierwszeństwo reguł.

Jeśli jednak chcesz pójść trochę dalej, sugeruję przeczytanie: Specyfikacja kaskady CSS W3C . Przekonasz się, że pierwszeństwo reguły jest oparte na:

1. Bieżący typ mediów;
2. Znaczenie;
3. Pochodzenie;
4. Specyfika selektora i wreszcie nasza znana reguła:
5. Który z nich jest określony.

AS jest stanem w W3: W3 Cascade CSS

kolejność stosowania różnych arkuszy stylów jest następująca (cytat z sekcji kaskadowej W3):

1. deklaracje klienta użytkownika

2. normalne deklaracje użytkownika

3. autor normalnych deklaracji

4. autor ważnych deklaracji

5. ważne deklaracje użytkownika

Więcej informacji na ten temat w przywołanym dokumencie W3

Kolejność, w jakiej klasy pojawiają się w elemencie html nie ma znaczenia, liczy się kolejność, w jakiej bloki pojawiają się w arkuszu stylów.

W twoim przypadku .smallbox-paysummaryjest zdefiniowane po .smallboxstąd pierwszeństwo 10px.

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

Inline css (atrybut stylu html) przesłania reguły css w tagu stylu i pliku css

Bardziej szczegółowy selektor ma pierwszeństwo przed mniej szczegółowym.

Reguły, które pojawiają się później w kodzie, zastępują wcześniejsze reguły, jeśli obie mają taką samą specyfikę.

Należy również zauważyć, że jeśli masz dwa style w elemencie HTML o równym priorytecie, przeglądarka da pierwszeństwo stylom, które zostały zapisane w modelu DOM last ... więc jeśli w DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... szerokość elementu div będzie wynosić 50 pikseli