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

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

Odpowiedzi: