Come specificare l'ordine delle classi CSS?

Sono un po 'confuso riguardo i CSS e l'attributo class. Ho sempre pensato che l'ordine in cui specifichi più classi nel valore dell'attributo abbia un significato. La classe successiva potrebbe/dovrebbe sovrascrivere le definizioni del precedente, ma questo non sembra funzionare. Ecco un esempio:Come specificare l'ordine delle classi CSS?

<html> 
<head> 
<style type="text/css"> 
    .extra { 
     color: #00529B; 
     border:1px solid #00529B; /* Blue */ 
     background-color: #BDE5F8; 
    } 

    .basic { 
      border: 1px solid #ABABAB; 
    } 
</style> 
</head> 
<body> 
    <input type="text" value="basic" class="basic"/> 
    <input type="text" value="extra" class="extra"/> 
    <input type="text" value="basic extra" class="basic extra"/> 
    <input type="text" value="extra basic" class="extra basic"/> 
</body> 
</html>

mi aspetterei, il terzo esempio con class="basic extra" dovrebbe avere un bordo blu, dal momento che il confine in più indicato sarebbe sovrascrivere il confine da quella di base.

sto usando FF 3 su Ubuntu 9.04

fonte

2009-08-24 Tim Büthe

182

L'ordine in cui gli attributi una classe vengono sovrascritti non è specificato dall'ordine di classi sono definite nel attributo di classe, ma invece in cui appaiono nel css

.myClass1 {font-size:10pt;color:red} 
.myClass2 {color:green;}

HTML

<div class="myClass2 myClass1">Text goes here</div>

Il testo nel div apparirà verde e non rosso perché myClass2 è più giù nella definizione CSS che nella mia classe1. Se dovessi scambiare l'ordinamento dei nomi di classe nell'attributo della classe, nulla cambierebbe.

fonte

2009-08-24 11:01:40 Zoidberg

+12

Wow, ho davvero sbagliato. Incredibile per quanto tempo avrei potuto realizzarlo senza rendermene conto :-) –

Sì, non è ovvio e ho fatto la stessa cosa che hai fatto. Mi ci sono voluti ore per capirlo. – Zoidberg

Non l'ho mai saputo :) Grande consiglio –

L'ordine delle classi nell'attributo è irrilevante. Tutte le classi nell'attributo class vengono applicate in modo uguale all'elemento.

La domanda è: in quale ordine compaiono le regole di stile nel file .css. Nell'esempio, .basic viene fornito dopo lo .extra, pertanto le regole .basic avranno la precedenza laddove possibile.

Se si desidera fornire una terza possibilità (per esempio, che è .basic ma che dovrebbe comunque applicare le regole .extra), avrete bisogno di inventare un'altra classe, .basic-extra forse, che prevede esplicitamente per questo.

fonte

2009-08-24 10:59:07 VoteyDisciple

Come specificare l'ordine delle classi CSS?

risposta

Problemi correlati