Wie unterscheidet man die gemeinsame CSS-Klasse mit anderen CSS-Klasse

Question

<div style="position: absolute; left: 0px; top: 5px;" class="v-caption v-caption-top_header"> 
    <div class="v-captiontext">Create User Wizard</div><div style="clear: both; width: 0px; height: 0px; overflow: hidden;"> 
    </div> 
</div> 
<div style="top: 70px; left: 10px;" class="v-absolutelayout-wrapper"> 
    <div style="height: 5px; width: 1257px;" class="v-label v-label-intro_key intro_key"> 
    </div> 
</div> 
<div style="position: absolute; left: 10px; top: 55px;" class="v-caption v-caption-intro_key"> 
    <div class="v-captiontext">User Details. 
</div> 

Ich muss einige Stile auf Create User Wizard Text anwenden. Aber ich kann nicht verweisen v-captiontext CSS-Klasse direkt becoz die gleiche CSS-Klasse wird von anderem Text auch zum Beispiel User Details Text verwendet. Wie können Änderungen nur auf Create User Wizard Text angewendet werden.

Answer 1

können Sie auf verschachtelte Klassen verweisen. In Ihrem aktuellen HTML könnten Sie v-caption-top_header mit v-captiontext innen es wie folgt verweisen:

.v-caption-top_header .v-captiontext { 
    ...some styles here... 
} 

oder

.v-caption-top_header>.v-captiontext { 
    ...some styles here... 
} 

(dem ersten gibt an, dass v-captiontext ist irgendwo unter v-caption-top_header im DOM, während der zweiten man gibt an, dass es ein direktes Kind ist, dh unmittelbar darunter im DOM. Das zweite ist wahrscheinlich vorzuziehen, außer dass es in IE6 nicht funktioniert. Wenn Sie also IE6 unterstützen müssen, dann verwenden Sie das erste)

Die anderen Optionen, die Sie haben, würden erfordern, dass Sie den HTML-Code ändern.

könnten Sie geben dem Create User Wizard Element eine spezifische ID und verwenden, die anstelle der Klasse:

<div class='v-captiontext' id='wizard_element'>....</div> 

#wizard_element { ..... } 

oder mehrere Klassen verwenden:

<div class='v-captiontext wizard_element'>....</div> 

.wizard_element { ..... } 

In diesem Fall die Wahl zwischen ID oder Klasse würde davon abhängen, ob Sie ein bisschen Styling auf dieses Element wird einzigartig sein - wenn es für dieses Element spezifisch ist, dann verwenden Sie eine ID; Wenn Sie es woanders verwenden möchten, verwenden Sie eine Klasse.

Wenn Sie noch Probleme haben, können Sie versuchen, einige trickier Lösungen mit:

CSS unterstützt Attributselektoren, mit denen Sie Elemente auswählen, basierend auf spezifischen HTML-Attribute. Das kann sehr nützlich sein, aber ich denke nicht, dass es dir hier helfen wird (da du sowieso nicht viele Attribute außer Styles und Klassen hast). Auch dies funktioniert in IE6 nicht.

Eine andere Option könnten Pseudo-Selektoren wie :first-child oder :nth-child() sein. Mit diesen können Sie beispielsweise festlegen, dass das erste übereinstimmende Element einen Stil erhält und andere etwas anderes. Diese können in Verbindung mit anderen oben genannten Techniken für Sie nützlich sein. Sie werden jedoch Probleme mit diesen mit allen aktuellen Versionen von IE haben, also wahrscheinlich nicht empfohlen.

Es gibt einen sehr guten Überblick über die verfügbaren CSS-Selektoren, zusammen mit denen sie bei Quirksmode.org unterstützen Browser: http://www.quirksmode.org/css/contents.html

Answer 2

Als div Sie ein Kind von v-caption v-caption-top_header stylen wollen aber v-caption v-caption-top_header nicht die Eltern des anderen div ist, sollten Sie nicht berühren wollen, diese Arbeit:

.v-caption.v-caption-top_header .v-captiontext { 
/* whatever style you want */ 
} 

Natürlich ist der bessere Ansatz ist einfach eine id="someuniqueid" zum div hinzufügen möchten Sie Stil wie und fügen Sie dann

#someuniqueid { /* style goes here */ } 

Answer 3

es eine ID geben als zu CLASS Gegensatz

Answer 4

Ist die Klasse v-caption-top_header des übergeordneten Elements div eindeutig? Wenn ja Sie einen Nachkommen Selektor verwenden können:

.v-caption-top_header .v-captiontext { 
    ... 
} 

http://www.w3.org/TR/CSS2/selector.html#descendant-selectors