W jakiej kolejności nadpisują arkusze stylów CSS?

157

W nagłówku HTML mam to:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssto mój arkusz specyficzny dla strony. master.cssto arkusz, którego używam w każdym z moich projektów, aby zastąpić ustawienia domyślne przeglądarki. Który z tych arkuszy stylów ma pierwszeństwo? Przykład: pierwszy arkusz zawiera konkretne

body { margin:10px; }

I powiązane obramowania, ale druga zawiera moje resetowania

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Zasadniczo, czy element kaskadowy CSS działa tak samo pod względem odniesień do arkuszy stylów, jak w typowych funkcjach CSS? Czyli to ostatnia linia jest wyświetlana?

css overriding stylesheet

— ian5v
źródło

Właśnie teraz zdałem sobie sprawę, że to byłoby lepiej dostosowane do webmasterów. Czy byłoby lepsze miejsce na opublikowanie tego?

— ian5v

10

Tutaj jest dobrze.

— Blender

4

body:not(input="button")Nawiasem mówiąc, nie jest prawidłowym selektorem. Prawdopodobnie chciałeś to podzielić na body, input:not([type="button"]).

— BoltClock

To interesujące. Nie wierzę, że widziałem wcześniej taką składnię. Nadal jestem nowy, ale te podwójne nawiasy są mi obce.

— ian5v

te nawiasy są przeznaczone do selektorów atrybutów: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: prawdopodobnie chcesz zmienić kolejność arkuszy stylów: Twój ogólny master.csspowinien załadować się jako pierwszy, a potem łatwiej będzie go zmienić mistrzowskie style w twoim styles.css.

— grilly

163

Zasady kaskadowania reguł CSS są złożone - zamiast próbować je źle parafrazować, po prostu skieruję Cię do specyfikacji:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

Krótko mówiąc: bardziej szczegółowe zasady zastępują bardziej ogólne. Specyfika jest definiowana na podstawie liczby identyfikatorów, klas i nazw elementów, a także tego, czy !importantużyto deklaracji. Jeśli istnieje wiele reguł o tym samym „poziomie szczegółowości”, wygrywa ta, która pojawi się jako ostatnia.

— duskwuff-nieaktywny-
źródło

1

Więc nie ma określonej reguły, w jakiej kolejności ładują się arkusze stylów? Rozumiem, jak wyświetla się CSS pod względem specyficzności, ale zakładam, że mój arkusz główny zostanie załadowany, chyba że zostanie zastąpiony.

— ian5v

11

Właściwie !importantuczestniczy bezpośrednio w kaskadzie i nie ma nic wspólnego ze specyfiką. Specyfika jest związana z selektorami, podczas gdy !importantjest używana z deklaracjami właściwości. (Więc masz rację mówiąc, że zasady są skomplikowane

— !;

2

Czy więc arkusze stylów ładują się w taki sam sposób jak elementy, z których ostatni ma pierwszeństwo, jeśli mają taką samą specyfikę?

— ian5v

3

@iananananan: Zasadniczo przeglądarka nigdy nie widzi CSS w kategoriach indywidualnych arkuszy stylów. Jeśli istnieje wiele arkuszy stylów, wszystkie są traktowane tak, jakby były jednym wielkim arkuszem stylów, a reguły są odpowiednio oceniane.

— BoltClock

2

@ user34660 Komentarz BoltClock jest z perspektywy stylów CSS. Masz rację, że arkusze stylów są przechowywane oddzielnie w DOM, ale to oddzielenie nie wpływa na to, jak te style są stosowane do czegokolwiek.

— duskwuff -inactive-

31

Stosowany jest najbardziej specyficzny styl:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Jeśli wszystkie selektory mają tę samą specyfikę, używana jest najnowsza dekleracja:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

W twoim przypadku body:not([input="button"])jest bardziej specyficzny, więc używane są jego style.

— Mikser
źródło

1

Zobacz mój komentarz do pytania dotyczącego tego ostatniego selektora.

— BoltClock

1

Reguła specyficzności utrudnia pracę, gdy musimy zastąpić arkusz stylów nie do edycji!

— Ari

23

Porządek ma znaczenie. Zostanie przyjęta ostatnia zadeklarowana wartość wielokrotnego wystąpienia. Zobacz ten sam, który opracowałem: http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Jeśli zmienisz kolejność .test{}, zobaczysz, że HTML przyjmuje wartość ostatniego zadeklarowanego w CSS

— Roy MJ
źródło

3

Więc powinieneś dodać najbardziej szczegółowy CSS na końcu.

— miłość na żywo

17

Ostatnim ładowanym CSS jest MASTER, który nadpisze wszystkie css z tymi samymi ustawieniami css

Przykład:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

Dane wyjściowe dla znacznika h1 będą miały rozmiar czcionki: 30px;

— Doodl
źródło

1

Cześć. W moim przypadku pierwszy zdefiniowany .cssjest ładowany jako ostatni. Czy są stosowane w kolejności, w jakiej są ładowane, czy w kolejności, w jakiej zostały zdefiniowane?

— Eugen Konkov

Dzięki, to jest dokładnie wyjaśnienie, którego szukałem.

— HunterTheGatherer,

7

Spróbujmy uprościć regułę kaskadowania na przykładzie. Zasady odnoszą się bardziej do ogólnych.

Stosuje regułę identyfikatora jeden pierwszy (nad klasą i / lub elementami niezależnie od kolejności)
Stosuje klasy do elementów niezależnie od kolejności
Jeśli nie ma klasy ani identyfikatora, stosuje te ogólne
Stosuje ostatni styl w zamówieniu (kolejność deklaracji na podstawie kolejności ładowania plików) dla tej samej grupy / poziomu.

Oto kod css i html;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Oto styl CSS

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Oto wynik. Bez względu na kolejność plików stylów lub deklarację stylu, id="important"obowiązuje na końcu (zwróć uwagę na class="deadline"zadeklarowany jako ostatni, ale nie ma żadnego efektu).

<article>Element zawiera <aside>element, jednak ostatni zadeklarował styl wejdą w życie, w tym przypadku article h2 { .. } na trzeci element h2.

Oto wynik w IE11: (Za mało praw do publikowania obrazu) DarkBlue: Houston Chronicle News, DarkGreen: Najnowsze osiągnięcia w Twoim mieście, Purple: Houston Local Advertisement Section, Black: Następna sekcja

— Kagan Agun
źródło

6

Zależy to zarówno od kolejności wczytywania, jak i specyfiki rzeczywistych reguł stosowanych w każdym stylu. Biorąc pod uwagę kontekst twojego pytania, chcesz najpierw załadować ogólny reset, a następnie konkretną stronę. Następnie, jeśli nadal nie widzisz zamierzonego efektu, musisz przyjrzeć się specyfice zaangażowanych selektorów, jak inni już zauważyli.

— prodigitalson
źródło

2

EDYCJA: kwiecień 2020 r., Zgodnie z komentarzem @ LeeC, już tak nie jest

Tak, działa tak samo, jak gdyby były w jednym arkuszu, jednak:

Ładuj kolejność ma znaczenie!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

W powyższym kodzie nie ma gwarancji, że master.csszaładuje się później styles.css. W związku z tym, jeśli master.csszostanie szybko załadowany i styles.csszajmie to trochę czasu, styles.cssstanie się drugim arkuszem stylów, a wszelkie reguły o tej samej specyficzności z master.csszostaną nadpisane.

Przed wdrożeniem najlepiej umieścić wszystkie reguły w jednym arkuszu (i zminimalizować).

— nacięcie
źródło

Rozważmy przypadek alternatywnych, prawie identycznych arkuszy stylów ładowanych z sekcji <head> strony, zawierającej warunkowe atrybuty multimediów, aby załadować arkusz stylów specyficzny dla smartfonów i tabletów. W takim przypadku logika określona w nośniku musi być ściśle wyłączna dla każdego arkusza stylów, jeśli kolejność ładowania jest nieokreślona.

— Lindsay Haisley

@n_i_c_k Twoja odpowiedź jest nieprawidłowa. Liczy się kolejność deklaracji , a nie kolejność załadunku . Właśnie przetestowałem to w programie Fiddler, zatrzymując pobieranie master.cssi pozwalając na styles.csspełne załadowanie. Następnie pozwoliłem master.csszaładować. Styl „overlapping” był master.cssnadal stosowany - a renderowanie zostało zablokowane do momentu master.csswczytania i przeanalizowania. Uwaga : próbowałem rel=preloadna master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css.

— LeeC

Dzięki @LeeC, wiem, że w momencie pisania moja odpowiedź była poprawna, ale wierzę Ci na słowo, że została naprawiona i edytuję moją odpowiedź.

— n_i_c_k

1

Najlepszym sposobem jest maksymalne wykorzystanie klas. Mimo wszystko unikaj selektorów ID (#). Kiedy piszesz selektory z pojedynczymi klasami, dziedziczenie CSS jest o wiele łatwiejsze.

Aktualizacja: Przeczytaj więcej o specyfice CSS w tym artykule: https://css-tricks.com/specifics-on-css-specificity/

— Jeroen Ooms
źródło

1

To jest świetny artykuł o specyfice CSS: css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

Podejrzewam na podstawie twojego pytania, że masz zduplikowane wybory, zestaw wzorcowy, który dotyczy wszystkich stron, i bardziej szczegółowy zestaw, który chcesz zastąpić wartości wzorcowe dla każdej strony. Jeśli tak jest, to Twoje zamówienie jest prawidłowe. Master jest ładowany jako pierwszy, a reguły w kolejnym pliku będą miały pierwszeństwo (jeśli są identyczne lub mają taką samą wagę). Bardzo zalecany opis wszystkich reguł znajduje się na tej stronie http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Kiedy zaczynałem z programowaniem front-end, ta strona wyjaśniła wiele pytań.

— user3094826
źródło

0

To kaskada określa pierwszeństwo deklaracji. Mogę polecić oficjalną specyfikację; ta część jest dobrze czytelna.

https://www.w3.org/TR/css-cascade-3/#cascading

Następujące elementy mają wpływ na sortowanie w malejącej kolejności według priorytetów.

Połączenie pochodzenia i ważności:
1. Transition deklaracje
2. Deklaracje klienta użytkownika oznaczone !important
3. Oświadczenia użytkownika oznaczone !important
4. Oświadczenia autora strony oznaczone !important
  1. Definicje dotyczące elementu z styleatrybutem
  2. Definicje dotyczące całego dokumentu
5. Animation deklaracje
6. Oświadczenia autora strony
  1. Definicje dotyczące elementu z styleatrybutem
  2. Definicje dotyczące całego dokumentu
7. Oświadczenia użytkownika
8. Deklaracje klienta użytkownika
Jeśli dwie deklaracje mają to samo pochodzenie i znaczenie, to przy obliczaniu punktacji w grę wchodzi specyfika, czyli to, jak jasno zdefiniowany jest element.
- 100 punktów za każdy identyfikator ( #x34y)
- 10 punktów za każdą klasę ( .level)
- 1 punkt za każdy typ elementu ( li)
- 1 punkt za każdy :hoverwykluczający pseudoelement ( ):not
Na przykład selektor main li + .red.red:not(:active) p > *ma swoistość 24.
Kolejność wygląd odgrywa jedynie rolę jeśli dwie definicje mają to samo pochodzenie, znaczenie i specyfikę. Późniejsze definicje poprzedzają wcześniejsze definicje w dokumencie (w tym import).

— Michael Schmid
źródło

0

Uważam, że podczas wykonywania kodu jest on czytany od góry do dołu, co oznacza, że ostatni link CSS zastąpiłby podobne style w dowolnym arkuszu stylów nad nim.

Na przykład, jeśli utworzyłeś dwa arkusze stylów

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

w obu ustawisz kolor tła body na dwa różne kolory - priorytet będzie miał kolor body w style2.css.

Możesz uniknąć problemu z priorytetem stylizacji, używając !IMPORTANTwewnątrz stylu klasowego, który chciałbyś mieć priorytet, lub ewentualnie zmieniając <link>kolejność.

— Ennam Hoque
źródło