In quale ordine sono applicati gli stili CSS?

Question

Ho il seguente codice HTML.

<ul> 
    <li> 
    <a>asdas</a> 
    </li> 
</ul> 

Nel mio foglio di stile CSS devo impostazioni generali per il tag, e diverse hundered linee successive impostazioni per ul li a. Ti piace questa:

a:link 
{ 
color: red; 
} 
... 
ul li a 
{ 
color:blue; 
} 

Firebug mi dice, che prima il colore: blu viene caricato, e poi sovrascritto per colore: rosso
Finora ho sempre pensato, che l'ordine dei file CSS di carico e la l'ordine di stile all'interno di un singolo file css indica al browser come devono essere formattati gli elementi HTML. Purtroppo ora lo sto vivendo viceversa.

Quindi dimmi, come devo correggere il mio stile per ottenere un tag all'interno del li da rendere blu e non rosso?

Answer 1

Gli stili vengono applicati in base allo stile specifico all'elemento e quindi in ordine testuale per le regole con uguale specificità. Altro qui in the spec. Perché a:link è più specifico di ul li a, che lo stile vince indipendentemente dal posizionamento.

Quindi dimmi, come devo correggere il mio stile per ottenere un tag all'interno del li da rendere blu e non rosso?

Rendere la regola blu almeno altrettanto specifica della regola rossa. In questo caso, è possibile farlo con l'aggiunta di :link ad esso:

ul li a:link 
{ 
    color:blue; 
} 

Answer 2

userei color:blue !important;

Answer 3

Ecco un articolo su CSS Selector specificità che sembra buono: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

La sezione in Come misurare la specificità? ti dà la risposta:

a:link => one tag (a) + one pseudo-class (:link) = 1 + 10 = 11 points 
ul li a: => three tags (ul, li, a)     = 1 + 1 + 1 = 3 points 

Così i una: vince stile di collegamento.

Suggerimento: ordine (nei file CSS) importa solo quando due selettori di CSS hanno la stessa specificità.