Wie wähle ich ein Element mit einer bestimmten Klasse aus?

Nach meinem Verständnis element.classsollte die Verwendung ermöglichen, dass ein bestimmtes Element, das einer Klasse zugewiesen ist, ein anderes "Styling" erhält als der Rest der Klasse. Dies ist keine Frage, ob dies verwendet werden soll oder nicht, sondern ich versuche zu verstehen, wie dieser Selektor funktionieren soll. Wenn ich mir eine Menge Beispiele im Internet ansehe, glaube ich, dass die Syntax korrekt ist und verstehe nicht, warum dies nicht funktioniert.

Hier ist ein Beispiel:

CSS:

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML:

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

Es sollte so sein:

h2.myClasssucht h2 mit klasse myClass. Sie möchten jedoch tatsächlich den Stil für h2 im Inneren anwenden, .myClassdamit Sie den Nachkommen-Selektor verwenden können .myClass h2.

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Demo

Dieser Verweis gibt Ihnen eine grundlegende Vorstellung von den Selektoren und wirft einen Blick auf Nachkommen-Selektoren

h2.myClassbezieht sich auf alle h2mit class="myClass".

.myClass h2bezieht sich auf alle h2Kinder von (dh verschachtelten) Elementen mit class="myClass".

Wenn das h2HTML in Ihrem HTML-Code blau angezeigt werden soll, ändern Sie das CSS wie folgt:

.myClass h2 {
    color: blue;
}

Wenn Sie in der Lage sein möchten, dies h2durch eine Klasse und nicht durch ihr Tag zu referenzieren, sollten Sie das CSS unverändert lassen und der h2Klasse im HTML eine Klasse geben :

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>

Der Element.class-Selektor ist für Styling-Situationen wie diese vorgesehen:

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

Sowohl Ihre Spanne als auch p erhalten die Schriftgröße und die Schriftgröße von .large, aber die Farbe Blau wird nur p zugewiesen.

Wie andere bereits betont haben, arbeiten Sie mit Nachkommen-Selektoren.

h2.myClassgilt nur für h2Elemente, denen die Klasse myClassdirekt zugewiesen wurde.

Sie möchten es so notieren:

.myClass h2

myClassWomit alle untergeordneten Kinder ausgewählt werden , die den Tagnamen habenh2

Mit dem CSS- :first-childSelektor können Sie auf ein Element abzielen, das das erste untergeordnete Element in seinem übergeordneten Element ist.

element:first-child { style_properties }
table:first-child { style_properties }