Quali sono le priorità tra i selettori CSS
-
07-07-2019 - |
Domanda
Domanda CSS: se due diversi selettori si applicano a un elemento, chi vince?
So che non dovrebbe succedere, ma voglio modificare un'applicazione legacy e il CSS si sta mettendo in mezzo.
Soluzione
I dettagli gory nelle specifiche sono in realtà ragionevolmente leggibili. In sintesi:
-
Le regole
! important
e le regole inlinestyle
vincono di più.-
Altrimenti, normalmente le vittorie più specifiche.
#id
è un selettore più specifico di.classname
è un selettore più specifico ditagname
. -
Dove le regole sono ugualmente specifiche, vince l'ultima dichiarata.
Non vi è alcun motivo particolare per cui questo & # 8216; non dovrebbe accadere & # 8217 ;. È normale specificare una regola a pennello largo e quindi aggiungere una regola più specifica per indirizzare un caso; più regole della stessa proprietà su un singolo elemento non sono insolite o indesiderabili.
Altri suggerimenti
devi trovare #no di id = A, # no di class = B e #no di tag = c nel selettore
Vince ABC con valore più alto.
.wrapper .title p {
//some other rules
}
A=0 B=2 C=1 =021
\#foo {
// some more rules
}
A=1 = 100
.bar .head div li{
// some more rules
}
A=0 B=2 C=2 =022
100 > 022 > 021
quindi vince #foo
Dovrebbe succedere! Ecco perché si chiama fogli di stile CASCADING. Puoi trovare un esempio delle priorità qui
Vedi la ordine di specificità della specifica (insieme a il resto di quel capitolo come! regole importanti e l'ordine in cui le regole compaiono nel foglio di stile hanno anch'esse un impatto).
" # id " è più potente di " .class " nome e " .class " è più potente di " tag " nome. Ma se applichiamo "! Important " della sua priorità è la maggior parte di essi.
- ! Importante
- stile in linea
- id
- class
- tag
La priorità tra i selettori è controllata da quanto sono specifici. Selettori più specifici vincono su meno specifici.
Se due selettori sono ugualmente specifici, quello successivo vince sul primo.
Esistono tre livelli di specificità, id, classe ed elemento. Quindi #elem
vince su .elem
poiché un ID è più specifico. .elem .cont
vince su .elem
in quanto ha più selettori allo stesso livello.
Ulteriori informazioni sotto " Cosa succede quando si verificano conflitti? " all'indirizzo Selectutorial .
L'ordine nel file CSS è importante solo se i selettori condividono la stessa specificità.
Per ulteriori informazioni sulla specificità del selettore: Andy Clarke ha scritto Specificity Wars che è la migliore panoramica di come funzionano.
CSS sta per Cascading Fogli di stile. Ciò significa che le regole si applicano agli elementi in modo a cascata. È perfettamente normale che diversi selettori si applichino a un elemento. Pensa, ad esempio, a quanto segue:
<div class="wrapper">
<div id="foo" class="bar" style="some rules">Test</div>
</div>
Le seguenti regole interesserebbero il "pippo" Elemento:
.wrapper {
//some other rules
}
#foo {
// some more rules
}
.bar {
// some more rules
}
Le regole per le priorità sono disponibili qui .
Consiglio sempre di utilizzare il plug-in " firebug " di Firefox. Ti mostrerà esattamente quali proprietà vengono valutate per un elemento specifico e perché, enfatizzando le sostituzioni durante la cascata.
- ! important
- stile in linea
- #id
- classe
- tag