Quali sono le priorità tra i selettori CSS

Question

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.

Answer 1

I dettagli gory nelle specifiche sono in realtà ragionevolmente leggibili. In sintesi:

Le regole

1. ! important e le regole inline style vincono di più.

2. Altrimenti, normalmente le vittorie più specifiche. #id è un selettore più specifico di .classname è un selettore più specifico di tagname .

3. 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.

Answer 2

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

Answer 3

Dovrebbe succedere! Ecco perché si chiama fogli di stile CASCADING. Puoi trovare un esempio delle priorità qui

Answer 4

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).

Answer 5

" # 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

Answer 6

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 .

Answer 7

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.

Answer 8

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.

Answer 9

1. ! important
2. stile in linea
3. #id
4. classe
5. tag