CSS: È possibile sostituire una classe con un’altra?

Ho una classe modello, che è semplicemente:

.template{
  display: none;    
}

Questo mi permette di creare un blocco con il codice html che posso clone utilizzando jQuery e leggermente modificare a mio piacimento. Tuttavia, uno della classe, ho ricevuto l’assegnazione di questo stesso elemento a essere clonato, set di:

.Category{
  display:table-row-group;
  //other properties not related to this problem not shown
}

Questo esegue l’override del template proprietà di visualizzazione, che sconfigge l’intero scopo di creare un modello di classe.

Di certo posso sempre aggiungere la Categoria di classe allo stesso tempo come rimuovere il modello di classe, tramite jQuery dopo la clonazione, ma non è l’ideale, perché il punto è che l’html dovrebbe essere facile da modificare e modifiche può essere fatto, piuttosto che all’interno di codice jQuery.

Pensieri? Sto pensando che forse posso dire di visualizzazione per eseguire l’override di altre proprietà o qualcosa di simile?

Grazie!

Non utilizzare display:none per nascondere i vostri modelli. Invece, metterli all’interno <script type="text/x-template"> tag, o di ottenere più specifico e utilizzare text/x-handlebars ecc per definire il tipo di modello.
display: none !important;
Giusto per essere chiari, vorrei display:none per eseguire l’override di qualsiasi altra proprietà di visualizzazione, che vorrei prendere in considerazione di essere importante.. una volta che il modello viene rimosso.
Oh, il mio male.. ho pensato che !importante.. significava “non importante”, simili a !=, significato sarebbe sovrascritto. Che sembra perfetto, grazie!

InformationsquelleAutor hughmanwho | 2013-10-29

6 Replies
  1. 19

    CSS ha un ben definito ordine di priorità.

    Se due selettori hanno la stessa priorità (come per le vostre due letti-selettori di classe), poi con parità di tutto il resto, quello che è definito per ultimo nel codice CSS è quello che ha la priorità.

    In modo semplice soluzione è quella di spostare il template CSS, più in basso, il tuo codice CSS.

    Se non puoi farlo per qualsiasi motivo, l’opzione migliore è quello di rendere la selezione del modello più specifici. Per esempio, se tutti i tuoi template elementi sono contenuti all’interno di un elemento div, e si sa che sta andando sempre essere vero, si potrebbe cambiare il selettore di div .template. Ora è più specifico rispetto al .Category di selezione, e, pertanto, dovrebbe avere la precedenza.

    Infine, si ha sempre la possibilità di !important. Cerco di evitare di utilizzare, se possibile, in quanto tende causare problemi se abusata, ma è lì per i casi in cui è necessario, infatti, casi come questo sono circa le migliori giustificato caso di utilizzo per !important posso pensare.

    InformationsquelleAutor Spudley

  2. 6

    Che è esattamente quello che !important; aggiungere al tuo valore.

    Non è possibile aggiungere !important per una Classe CSS come la domanda per.

    InformationsquelleAutor SLaks

  3. 1

    Ci sono due opzioni :

    1. Raccomandato: L’ordine della definizione della classe nel CSS conta davvero, essere sicuri che la classe che si vuole veramente è dopo l’altro.

    2. Non consigliato: Uso !important alla fine della frase non è raccomandato perché, se è necessario eseguire l’override di questo dopo sarà più complicato.

    InformationsquelleAutor DaniP

  4. 1

    Per una soluzione rapida, si può semplicemente fare il vostro css regola più specifica:

    body .Category{
      display:table-row-group;
     //other properties not related to this problem not shown
    }

    diciamo che questo codice :

    <html>
    <head>
      <style>
        div{background-color:#ccc} 
        #content .Category{display:block;}
        .template{display:none;}
        .otherdiv{background-color:red;}
        body .otherdiv{background-color:green;}
    </style>
    </head>
    <body>
      <div id="content">
        <div class="template Category" >inner template div</div>
      </div>
      <div class="template">outer template div</div>
      <div class="otherdiv">outer other div</div>
    </body>
    </html>

    Il inner template div verrà visualizzato come blocco, ma l’esterno non sarà.

    Più specifico le vostre regole css sono più “naturalmente importante. Nel mio codice, il div .otherdiv verranno visualizzati con un verde backgroupd perché il body .otherdiv è più importante .otherdiv

    Vedere che l’articolo su css specificità http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    Inizia da 0, aggiungere 1000 per l’attributo di stile, aggiungere 100 per ogni ID, aggiungere 10 per ogni attributo, di classe o di pseudo-classe, aggiungere 1 per ogni elemento il nome o pseudo-elemento.”

    utilizzando !important non è raccomandato a tutti, e non è supportato da tutti i browser

    InformationsquelleAutor Asenar

  5. 0

    Aggiungere !IMPORTANTE il .Categoria.

    .Category{
      display:table-row-group;
      //other properties not related to this problem not shown
    }

    InformationsquelleAutor schnawel007

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *