Komplexe Kombinationen von Nachfahrenselektoren und Klassen in CSS
Nehmen wir an, wir haben nun den folgenden Code:
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
Lassen Sie uns alle Elemente mit der Klasse header finden,
die sich innerhalb eines Elements mit der Klasse block befinden,
und ihnen die Schriftart Arial zuweisen:
.block .header {
font-family: Arial;
}
Wie im HTML-Code zu sehen ist, können innerhalb eines Elements mit
der Klasse block die Elemente mit der Klasse header
sowohl Überschriften h2 als auch Überschriften h3 sein.
Lassen Sie uns Selektoren schreiben, die diese Überschriften unterscheiden, und etwas
mit diesen Überschriften machen.
Lassen Sie uns alle h2 mit der Klasse header auswählen,
die sich innerhalb eines Elements mit der Klasse block befinden:
.block h2.header {
font-size: 30px;
color: red;
}
Und nun wählen wir alle h3 mit der Klasse
header aus, die sich innerhalb eines Elements
mit der Klasse block befinden:
.block h3.header {
font-size: 20px;
color: green;
}
Lassen Sie uns unseren gesamten CSS-Code zusammenfassen:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Wenden wir ihn auf unseren HTML-Code an:
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.eee .bbb {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.eee h2 {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.eee h2.bbb {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.eee h3.bbb {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.eee p.bbb {
color: red;
}
Erklären Sie, was der Selektor im untenstehenden Code auswählt. Schreiben Sie dann einen HTML-Code, der zu diesem Selektor passt. Hier ist der Code mit dem Selektor:
.eee .bbb .kkk {
color: red;
}
