Tag mit vorgegebener Klasse in CSS
Nehmen wir an, wir haben zwei Arten von Tags mit denselben
Klassen. Zum Beispiel haben sowohl Überschriften h2
als auch Absätze dieselbe Klasse:
<h2 class="eee">Title</h2>
<p class="eee">
text
</p>
<h2 class="eee">Title</h2>
<p class="eee">
text
</p>
Wir könnten beispielsweise alle Elemente mit dieser Klasse rot einfärben:
.eee {
color: red;
}
Man kann sich jedoch auch an einen bestimmten Tag
mit einer Klasse wenden. Zum Beispiel kann man alle h2
mit der Klasse eee auswählen und separat alle
p mit dieser Klasse auswählen.
Dazu muss im Selektor der Tag-Name
geschrieben werden, und dann, direkt anschließend, der Klassenname. Lassen Sie uns
zum Beispiel h2 mit unserer Klasse
rot einfärben und Absätze mit dieser Klasse
- in grün:
h2.eee {
color: red;
}
p.eee {
color: green;
}
Gegeben ist der folgende Code:
<h2 class="header">text</h2>
<h2 class="header">text</h2>
<h3 class="header">text</h3>
<h3 class="header">text</h3>
.header {
color: red;
}
Machen Sie alle h2 mit der Klasse header
40px groß und alle h3 mit dieser
Klasse - 30px groß.