CSS: Ist es möglich, das überschreiben einer Klasse mit einem anderen?

Ich habe eine template-Klasse, das ist einfach:

.template{
  display: none;    
}

Dies ermöglicht es mir, einen block erstellen, mit html, dass ich clone mit jQuery und leicht zu Bearbeiten nach meinem Geschmack. Jedoch, eine der Klasse ich habe die Zuweisung an das gleiche element geklont werden, setzt:

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

Endet das überschreiben der template-Anzeige-Eigenschaft, die Niederlagen der ganze Zweck, so dass es eine template-Klasse.

Sicherlich kann ich immer nur fügen Sie die Kategorie, der Klasse zur gleichen Zeit wie Entferne ich die template-Klasse per jQuery nach dem Klonen, aber es ist nicht ideal, weil der ganze Punkt ist, dass die html sollte leicht zu Bearbeiten und änderungen vorgenommen werden können, anstatt innerhalb von jQuery-code.

Gedanken? Ich bin vielleicht denken kann ich sagen, die Anzeige zu überschreiben, andere Eigenschaften oder sowas?

Danke!

Verwenden Sie nicht display:none zu verstecken Sie Ihre Vorlagen. Stattdessen steckte Sie in <script type="text/x-template"> tags, oder spezifische und verwenden text/x-handlebars etc zu definieren, die tatsächliche Art der Vorlage.
display: none !important;
Nur um klar sein, ich würde wie display:none, um zu überschreiben andere Eigenschaften von Anzeige, das würde ich für wichtig halten.. sobald die Vorlage entfernt wird.
Oh, mein Fehler.. dachte ich !wichtig.. meinte "nicht wichtig", ähnlich wie !=, Sinn würde es überschrieben werden. Das sieht perfekt aus, danke!

InformationsquelleAutor hughmanwho | 2013-10-29

  1. 19

    CSS hat eine sehr gut definierte Reihenfolge der Priorität.

    Wenn die beiden Selektoren haben dieselbe Priorität (wie pro Ihre beiden single-class-Selektoren), dann mit allen anderen gleich sind, die eine definierte last in der CSS-code ist derjenige, der Vorrang hat.

    Also die einfache Lösung hier ist, sich zu bewegen, Ihre template-CSS zu senken und Ihren CSS-code.

    Wenn Sie das nicht kann, aus welchem Grund auch immer, Ihre beste option ist, um die template-Selektor spezifischer. Zum Beispiel, wenn alle Ihre template-Elemente enthalten sind, die innerhalb eines div-Elements und wissen Sie, das ist immer wahr, Sie könnte sich ändern, den Wahlschalter auf div .template. Es ist jetzt mehr spezifisch als die .Category - Selektor, und sollte deshalb Vorrang haben.

    Schließlich haben Sie immer die Möglichkeit !important. Ich versuche zu vermeiden, mit der es, wenn möglich, da es dazu neigt, die Probleme verursachen, wenn überstrapaziert, aber es wird nur für Fälle, wo es gebraucht wird, und in der Tat, Fälle wie diese sind über die best gerechtfertigt use-case für !important ich denken kann.

    InformationsquelleAutor Spudley

  2. 6

    Das ist genau das, was !important tut, hinzufügen, dass zu Ihrem Wert.

    Sie können nicht hinzufügen !important um eine CSS-Klasse als die gestellte Frage.

    InformationsquelleAutor SLaks

  3. 1

    Gibt es zwei Möglichkeiten :

    1. Empfohlen: Die Reihenfolge der class-definition in der CSS-wirklich wichtig ist, werden Sie sicher, dass die Klasse, die Sie wirklich wollen, ist nach der anderen.

    2. Nicht empfohlen: !important am Ende des Satzes ist es nicht empfehlenswert, weil, wenn Sie außer Kraft setzen müssen, nachdem es gonna be mehr kompliziert.

    InformationsquelleAutor DaniP

  4. 1

    Für eine schnelle Lösung, können Sie einfach Ihre css-Regel: 

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

    können sagen, Sie haben diesen code :

    <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>

    Den inner template div wird als Block, aber die äußeren nicht.

    Mehr spezifische css-Regeln sind, mehr "natürlich wichtig" Sie sind. In meinem code wird das div .otherdiv wird angezeigt mit einem grünen backgroupd, weil die body .otherdiv ist wichtiger als .otherdiv

    Sehen, dass Artikel über css-Spezifität http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    "Bei 0 beginnen, fügen Sie 1000 für style-Attribut hinzufügen 100 für jede ID, fügen Sie 10 für jedes Attribut, die Klasse oder die pseudo-Klasse, fügen Sie 1 für jedes element-name oder pseudo-element."

    mit !important ist nicht empfohlen und wird nicht von allen Browsern unterstützt

    InformationsquelleAutor Asenar

  5. 0

    Hinzufügen !WICHTIG für die .Kategorie.

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

    InformationsquelleAutor schnawel007

  6. 0
    .template.Category {
  display: none;
}

    Oder nutzen Sie einfach !wichtig

    .template {
  display: none !important;
}

    InformationsquelleAutor Artek Wisniewski

Schreibe einen Kommentar