Domanda CSS - Specificità e interruzione

Question

Perché nello following codeworld è blu anziché rosso?

La specificità di .my_class è 0,0,1,0, ma eredita il colore del #my_id cui specificità è superiore (0,1,0,0).

HTML:

<p id='my_id'> 
    Hello 
    <span class='my_class'> 
     world 
    </span> 
</p> 

CSS:

#my_id { 
    color: red; 
} 

.my_class { 
    color: blue; 
} 

Answer 1

See: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

An ereditò valore ha effetto per un elemento solo se nessun altro dichiarazione di stile è stato applicato direttamente all'elemento.

Questo stile si applica a un elemento con id="my_id":

#my_id { 
    color: red; 
} 

... e sarà applicato (erediterà) ad un elemento annidato all'interno di dover class="my_class"solo se sua proprietà color altrimenti specificato.

... che non è più il caso una volta che si dichiara:

.my_class { 
    color: blue; 
} 

Answer 2

Va basata sulla specificità e la posizione. La classe viene applicata direttamente al testo, ma l'ID è più lontano.

Per una lunga spiegazione: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Answer 3

Un modo più semplice a pensarci bene, l'ordine specificità vale allo stesso livello, se uno stile è un genitore più locale allora vale, a prescindere se un antenato ha uno stile con maggiore specificità (poiché è più lontano, o meno locale).

Answer 4

Buona domanda. La ragione per cui ciò accade, è dovuta all'ereditarietà, non alla specificità.

Guardalo in questo modo, se lo span non avesse quella classe, erediterebbe il colore rosso dall'elemento genitore <p> e "mondo" sarebbe rosso. Ma nota che ciò è dovuto all'eredità.

Quando si imposta il colore per lo span, tramite la classe, che sostituisce il valore ereditato.

Specificità è per determinare quale regola utilizzare in più regole concorrenti. Nel tuo esempio, non ci sono regole in competizione per <intervallo>, quindi la specificità non entra in gioco. Tuttavia, se si aggiunge questo ai vostri stili:

#my_id span {color: orange} 

vedreste che "mondo" è arancione a causa della specificità della id essere più rispetto alla classe.