CSS: Ist es möglich, eine Klasse durch eine andere zu überschreiben?

ich eine Template-Klasse haben, ist, dass einfach:CSS: Ist es möglich, eine Klasse durch eine andere zu überschreiben?

.template{ 
    display: none;  
}

Dies erlaubt mir, einen Block mit HTML zu erstellen, die ich klonen jQuery und leicht nach meinem Geschmack bearbeiten. Allerdings ist einer der Klasse I zu demselben Element zuweisen habe zu geklont werden, setzt:

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

Dies beendet die Vorlage Anzeigeeigenschaft überschreiben auf, die den Sinn und Zweck der es sich um eine Template-Klasse zu machen.

Natürlich kann ich immer die Category-Klasse gleichzeitig hinzufügen, wenn ich die Template-Klasse über jQuery nach dem Klonen entferne, aber das ist nicht ideal, weil der HTML-Code einfach zu bearbeiten und zu ändern ist dort statt innerhalb von jQuery-Code.

Gedanken? Ich denke, vielleicht kann ich Anzeige sagen, um andere Eigenschaften oder etwas Ähnliches zu überschreiben?

Vielen Dank!

Quelle

2013-10-29 hughmanwho

unterstützt Verwenden Sie keine 'Anzeige: none' Ihre Vorlagen zu verbergen. Setzen Sie sie stattdessen in '

Genau das tut !important; füge das deinem Wert hinzu.

Quelle

2013-10-29 14:40:42 SLaks

Sie können nicht '! Wichtig 'zu einer CSS-Klasse als die Frage hinzufügen. –

Hinzufügen! WICHTIG zur .Category.

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

Quelle

2013-10-29 14:43:19 schnawel007

.template.Category { 
    display: none; 
}

Oder benutzen Sie einfach wichtig

.template { 
    display: none !important; 
}

Quelle

2013-10-29 14:43:24

Es gibt zwei Möglichkeiten:

Empfehlung: Die Reihenfolge der Klassendefinition in der CSS wirklich wichtig ist, sollten Sie dass die Klasse, die du wirklich willst, nach der anderen ist.
Nicht empfohlen: Verwenden Sie !important am Ende des Satzes, es ist nicht zu empfehlen, denn wenn Sie dies überschreiben müssen, nachdem es komplizierter wird.

Quelle

2013-10-29 14:46:00 DaniP

Für eine schnelle Lösung, können Sie einfach Ihre CSS-Regel präziser machen:

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

können sagen, dass Sie diesen Code haben:

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

Die inner template div wird als Block angezeigt werden, aber die Außen wird nicht sein.

Spezifischer Ihre CSS-Regeln sind, mehr "natürlich wichtig" sie sind. In meinem Code, die div .otherdiv wird mit einem grünen backgroupd angezeigt werden, da die body .otherdiv wichtiger ist als .otherdiv

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

„bei 0 starten, fügen Sie 1000 für style-Attribut, 100 Fügen Sie für jede ID 10 für jedes Attribut, jede Klasse oder Pseudoklasse hinzu, fügen Sie für jeden Elementnamen oder jedes Pseudoelement 1 hinzu. "

!important verwendet, wird nicht empfohlen und wird nicht von allen Browsern

Quelle

2013-10-29 14:53:50 Asenar

Verwandte Themen