Precedenza di più classi che definiscono la proprietà del colore impostata dall'ordine di dichiarazione piuttosto che dall'ordine delle specifiche

Question

Dato due classi di specificità uguale che definiscono la proprietà color, ho pensato che l'ultima classe elencata nell'attributo class element avrebbe avuto la precedenza.

Da http://htmlhelp.com/reference/css/structure.html:

Ordine di specificazione Per rendere più facile, quando due norme hanno lo stesso peso, l'ultima regola vince specificati.

Nel seguente esempio di codice vuoto l'ordine in cui sono definite le regole di classe determina la precedenza. Qui l'ultima o più recente definizione della serie di regole ha la precedenza.

<style> 
    .makeBlue {color: blue;} 
    .makeGreen {color:green;} 
</style> 
<div> 
    <p class="makeGreen makeBlue">makeGreen makeBlue</p> 
    <p class="makeBlue makeGreen">makeBlue makeGreen</p> 
</div> 

Il testo di output è verde.

Se scambiare l'ordine di dichiarazione di classe, e dichiarare .makeGreen prima

<style> 
    .makeGreen {color:green;} 
    .makeBlue {color: blue;}   
</style> 
<div> 
    <p class="makeGreen makeBlue">makeGreen makeBlue</p> 
    <p class="makeBlue makeGreen">makeBlue makeGreen</p> 
</div> 

Il testo di output è di colore blu.

Non l'ho mai notato prima. modifica Ho pensato che modifica l'ultima classe elencata nell'attributo classe elemento abbia la precedenza.

modificare Per chiarire -> A volte penso di un elemento come un animale domestico, diciamo un cane. Vedo aggiungere una classe all'attributo di classe dell'elemento come emettere il comando di un cane. Se gli dico di sedermi e poi di dirlo sdraiarsi, mi aspetto che il cane si sdrai. Non mi aspetto che il cane rimanga seduto semplicemente perché gli ho insegnato come sedermi dopo (più recentemente di) a insegnargli come sdraiarsi.

Quindi ... due domande.

1. È così che dovrebbe essere? risposto
2. Se sì ... perché? Non riesco a vedere il vantaggio di dover scavare attraverso le dichiarazioni della classe per determinare quale è stato dichiarato prima dell'altro.

Grazie mille!

Answer 1

L'ordine delle classi come le si specifica sugli elementi è irrilevante. È l'ordine in cui li definisci nelle dichiarazioni di stile che contano. La citazione che hai postato significa nelle dichiarazioni di stile, non nell'ordine in cui le classi sono elencate sugli elementi.

Answer 2

Questo sembra limitare le opzioni. Se voglio usare due classi su due paragrafi diversi ma la precedenza è diversa, avrei bisogno di definire una terza classe che è la stessa della prima classe definita ma con un nome leggermente diverso.

e.g

.xxxxx {margin-top: 1em; margin-left: 0; text-align: left; ... [some other attribute definitions]}<br/> 

.yyyyy {margin-top: 3em; margin-left: 1em; text-align: justify; ... [some different attribute definitions]} 

<p class="yyyyy xxxxx">...</p> 

utilizzerà sempre un margine superiore di 3em con un margine sinistro di 1em e un allineamento di testo di giustificare più gli altri attributi di xxxxx e yyyyy. Tuttavia, potrebbe esserci una situazione in cui voglio sovrascrivere le impostazioni margin-top, margin-left e text-align mantenendo tutti gli altri attributi in xxxxx e yyyyy. Se la precedenza è stato determinato ordine nella attributo di classe quindi vorrei avere questa opzione in questo modo:

<p class="xxxxx yyyyy">...</p> 

Dato che non è, devo creare un'altra definizione di seguito i due in questione, come così:

.zzzzz {margin-top: 1em; margin-left 0; text-align: left; ... [some other attribute definitions]} 

e utilizzare

<p class="yyyyy zzzzz">...</p> 

Ciò sembra come una soluzione non ottimale al problema che ordine attributo di classe di precedenza consente un'ottima flessibilità senza mucking il CSS.

BTW, il Nook Glowlight fa il modo in cui dovrebbe essere fatto permettendomi di impostare la precedenza in base all'ordine nell'attributo di classe. E quindi il mio css è un po 'più compatto.

Se c'è qualcosa che ho imparato nei miei decenni di programmazione, è che la precedenza è il più vicino possibile a dove tutto il lavoro viene svolto. Posizionare la precedenza in un foglio di stile statico collegato riduce la flessibilità.