In quale ordine hanno la precedenza i fogli di stile CSS?

157

In un'intestazione HTML, ho questo:

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

styles.cssè il mio foglio specifico per la pagina. master.cssè un foglio che uso su ciascuno dei miei progetti per sovrascrivere le impostazioni predefinite del browser. Quale di questi fogli di stile ha la priorità? Esempio: il primo foglio contiene specifici

body { margin:10px; }

E i bordi associati, ma il secondo contiene i miei ripristini di

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

In sostanza, l'elemento a cascata dei CSS funziona allo stesso modo in termini di riferimenti ai fogli di stile come nelle normali funzioni CSS? Vuoi dire che l'ultima riga è quella visualizzata?

css overriding stylesheet

— ian5v
fonte

Ho appena capito che questo sarebbe più adatto per i webmaster. Ci sarebbe un posto migliore per pubblicare questo?

— ian5v,

10

Proprio qui va bene.

— Blender,

4

body:not(input="button")comunque non è un selettore valido. Probabilmente intendevi dividerlo in body, input:not([type="button"]).

— BoltClock

Interessante. Non credo di aver mai visto una simile sintassi prima. Sono ancora nuovo, ma quelle doppie parentesi sono estranee a me.

— ian5v

queste parentesi sono per i selettori di attributi: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: probabilmente vuoi cambiare l'ordine dei fogli di stile: il tuo generale master.cssdovrebbe caricare prima, quindi è molto più facile scavalcare gli stili principali nel tuo styles.css.

— grilly

163

Le regole per il CSS CSS sono complesse - piuttosto che cercare di parafrasarle male, farò semplicemente riferimento alle specifiche:

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

In breve: regole più specifiche prevalgono su quelle più generali. La specificità è definita in base al numero di ID, classi e nomi di elementi coinvolti, nonché al fatto che la !importantdichiarazione sia stata utilizzata. Quando esistono più regole dello stesso "livello di specificità", vince quella che appare l'ultima.

— duskwuff -inattivo-
fonte

1

Quindi non esiste una regola specifica su quale ordine caricare i fogli di stile? Capisco come viene visualizzato CSS in termini di specificità, ma poi suppongo che il mio foglio principale verrà caricato a meno che non venga sostituito.

— ian5v,

11

In realtà, !importantpartecipa direttamente alla cascata e non ha nulla a che fare con la specificità. La specificità è correlata ai selettori, mentre !importantviene utilizzata con le dichiarazioni di proprietà. (Quindi hai ragione nel dire che le regole sono complesse!;)

— BoltClock

2

Quindi i fogli di stile si caricano allo stesso modo degli elementi, l'ultimo ha la precedenza se hanno la stessa specificità?

— ian5v

3

@iananananan: Fondamentalmente, il browser non vede mai i CSS in termini di fogli di stile individuali. Se ci sono più fogli di stile, vengono trattati tutti come se fossero un foglio di stile gigante e le regole vengono valutate di conseguenza.

— BoltClock

2

@ user34660 Il commento di BoltClock è dal punto di vista dello stile CSS. Hai ragione nel dire che i fogli di stile sono tenuti separati nel DOM, ma che la separazione non influisce sul modo in cui tali stili vengono applicati a qualsiasi cosa.

— duskwuff -inattivo-

31

Viene applicato lo stile più specifico:

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

div {
  color: red;
}

Se tutti i selettori hanno la stessa specificità, viene utilizzata la declerazione più recente:

div {
  color: red;
}

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

Nel tuo caso, body:not([input="button"])è più specifico, quindi vengono utilizzati i suoi stili.

— Miscelatore
fonte

1

Vedi il mio commento sulla domanda riguardante l'ultimo selettore.

— BoltClock

1

La regola di specificità rende le cose più difficili quando dobbiamo scavalcare il foglio di stile non modificabile!

— Ari,

23

L'ordine è importante. Verrà preso l'ultimo valore dichiarato di occorrenza multipla. Si prega di vedere lo stesso che ho elaborato: http://jsfiddle.net/Wtk67/

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


<style>
    .test{
        color:blue;
    }

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

Se si scambia l'ordine di .test{}, allora si può vedere che l'HTML assume il valore dell'ultimo dichiarato nel CSS

— Roy MJ
fonte

3

Quindi dovresti aggiungere l'ultimo CSS più specifico.

— live-love,

17

L'ultimo caricamento CSS è THE MASTER, che sostituirà tutti i CSS con le stesse impostazioni CSS

Esempio:

<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;
}

L'output per il tag h1 avrà la dimensione del carattere: 30px;

— Doodl
fonte

1

Ciao. Nel mio caso il primo definito .cssviene caricato per ultimo. Sono applicati nell'ordine in cui sono caricati o nell'ordine in cui sono definiti?

— Eugen Konkov,

Grazie, questa è esattamente la spiegazione che stavo cercando.

— HunterTheGatherer il

7

Proviamo a semplificare la regola a cascata con un esempio. Le regole vanno più specifiche al generale.

Applica prima la regola dell'ID (sopra la classe e / o gli elementi indipendentemente dall'ordine)
Applica le classi sugli elementi indipendentemente dall'ordine
Se nessuna classe o ID, applica quelli generici
Applica l'ultimo stile nell'ordine (ordine di dichiarazione basato sull'ordine di caricamento del file) per lo stesso gruppo / livello.

Ecco il codice CSS e 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>

Ecco lo stile 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>

Ecco il risultato. Indipendentemente dall'ordine dei file di stile o dalla dichiarazione di stile,id="important" applica alla fine (notare ilclass="deadline" ultimo dichiarato ma non ha alcun effetto).

L' <article>elemento contiene <aside>element, tuttavia l'ultimo stile dichiarato avrà effetto, in questo casoarticle h2 { .. } sul terzo elemento h2.

Ecco il risultato su IE11: (Diritti insufficienti per pubblicare l'immagine) DarkBlue: Houston Chronicle News, DarkGreen: Ultimi sviluppi nella tua città, Viola: Houston Pubblicità locale, Sezione nera: Sezione successiva

— Kagan Agun
fonte

6

Dipende dall'ordine di caricamento e dalla specificità delle regole effettive applicate a ciascuno stile. Dato il contesto della tua domanda, devi prima caricare il ripristino generale, quindi la pagina specifica. Quindi se ancora non si vede l'effetto desiderato, è necessario esaminare la specificità dei selettori coinvolti, come altri hanno già sottolineato.

— prodigitalson
fonte

2

EDIT: aprile 2020, secondo il commento di @ LeeC, questo non è più il caso

Sì, funziona come se fossero in un foglio, tuttavia:

Carica ordine!

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

Nel codice sopra, non vi è alcuna garanzia che master.cssverrà caricata dopo styles.css. Pertanto, se master.cssviene caricato rapidamente e styles.cssimpiega un po 'di tempo, styles.cssdiventerà il secondo foglio di stile e qualsiasi regola della stessa specificità damaster.css verranno sovrascritte.

È meglio mettere tutte le regole in un foglio (e minimizzare) prima di distribuirle.

— n_i_c_k
fonte

Considera il caso di fogli di stile alternativi quasi identici caricati dalla sezione <head> di una pagina, uno contenente attributi multimediali condizionali per caricare un foglio di stile specifico per smartphone e tablet. In questo caso, la logica specificata nei supporti deve essere rigorosamente esclusiva per ciascun foglio di stile se l'ordine di caricamento è indeterminato.

— Lindsay Haisley,

@n_i_c_k La tua risposta è errata. L'ordine di dichiarazione è ciò che conta, non l' ordine di caricamento . Ho appena provato questo con Fiddler, interrompendo il download master.csse lasciando styles.csscaricare completamente. Quindi, ho lasciato master.csscaricare. Lo stile di "sovrapposizione" viene master.cssancora applicato e il rendering è stato bloccato fino al master.csscaricamento e analizzato. Nota : ho provato rel=preloadsu master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.

— LeeC

Grazie @LeeC, so che al momento in cui ho scritto la mia risposta era corretta, ma prenderò in considerazione la tua parola che ora è stata risolta e modifica la mia risposta.

— n_i_c_k

1

Il modo migliore è usare le classi il più possibile. Evita comunque i selettori ID (#). Quando si scrivono selettori con sole singole classi, l'eredità CSS è molto più facile da seguire.

Aggiornamento: leggi di più sulla specificità CSS in questo articolo: https://css-tricks.com/specifics-on-css-specificity/

— Jeroen Ooms
fonte

1

Questo è un grande articolo sulla specificità CSS: css-tricks.com/specifics-on-css-specificity

— Jeroen Ooms

0

Sospetto dalla tua domanda che tu abbia selezioni duplicate, un set principale, valido per tutte le pagine e un set più specifico che desideri sovrascrivere i valori principali per ogni singola pagina. In tal caso, il tuo ordine è corretto. Il Master viene caricato per primo e le regole nel file successivo avranno la precedenza (se sono identiche o hanno lo stesso peso). C'è una descrizione altamente raccomandata di tutte le regole su questo sito http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Quando ho iniziato con lo sviluppo del front-end, questa pagina ha chiarito tante domande.

— user3094826
fonte

0

È la cascata che definisce la precedenza delle dichiarazioni. Posso raccomandare le specifiche ufficiali; questa parte è ben leggibile.

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

Quanto segue ha un effetto sull'ordinamento, in ordine decrescente di priorità.

Una combinazione di origine e importanza:
1. Transition dichiarazioni
2. Dichiarazioni dell'agente utente contrassegnate con !important
3. Dichiarazioni dell'utente contrassegnate con !important
4. Dichiarazioni dell'autore della pagina contrassegnate con !important
  1. Definizioni sull'elemento con styleattributo
  2. Definizioni a livello di documento
5. Animation dichiarazioni
6. Dichiarazioni dell'autore della pagina
  1. Definizioni sull'elemento con styleattributo
  2. Definizioni a livello di documento
7. Dichiarazioni dell'utente
8. Dichiarazioni dell'agente utente
Se due dichiarazioni hanno la stessa origine e importanza, la specificità, ovvero la chiarezza dell'elemento, entra in gioco, calcolando un punteggio.
- 100 punti per ogni identificatore (#x34y )
- 10 punti per ogni classe ( .level)
- 1 punto per ogni tipo di elemento ( li)
- 1 punto per ogni pseudo-elemento ( :hover) escluso:not
Ad esempio, il selettore main li + .red.red:not(:active) p > *ha una specificità di 24.
L' ordine di apparizione gioca un ruolo solo se due definizioni hanno la stessa origine, importanza e specificità. Le definizioni successive precedono le definizioni precedenti nel documento (comprese le importazioni).

— Michael Schmid
fonte

0

Credo che quando si esegue il codice, viene letto dall'alto verso il basso, il che significa che l'ultimo collegamento CSS sarebbe sovrascrivere stili simili in qualsiasi foglio di stile sopra di esso.

Ad esempio, se hai creato due fogli di stile

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

e in entrambi, imposti il colore di sfondo del corpo su due colori diversi: il colore del corpo in style2.css avrebbe la priorità.

Puoi evitare il problema della priorità di stile utilizzando !IMPORTANTall'interno dello stile di classe che desideri prendere la priorità o eventualmente riorganizzando il tuo <link>ordine.

— Ennam Hoque
fonte