Vererbung von CSS-Eigenschaften

Nehmen wir an, wir haben einen Absatz, und darin etwas Text im Tag i:

<p>
	This is some <i>text</i> in paragraph.
</p>

Lassen Sie uns die Absätze rot einfärben:

p {
	color: red;
}

Als Ergebnis wird nicht nur der Text des Absatzes eingefärbt, sondern auch der Text des Tags i:

Der Punkt ist, dass die Eigenschaft color vererbt wird. Das bedeutet, dass wenn beim Elterntag eine bestimmte Farbe gesetzt ist, dann wird diese Farbe auch für die Nachkommen übernommen. Nicht alle CSS-Eigenschaften werden vererbt, aber viele (von denen, die Sie bereits kennen - alle werden vererbt).

Bei Bedarf kann man jedoch die Eigenschaft des Elternelements überschreiben, indem man einen Selektor für den Nachkommen setzt. Zum Beispiel, lassen Sie uns für den Absatz rot setzen und für kursiv - blau:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

Die Reihenfolge der Selektoren im CSS-Code spielt in diesem Fall keine Rolle. Wenn man den Selektor i und den Selektor p vertauscht, wird alles genauso funktionieren:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

Wenn Sie den Code studieren, sagen Sie welche Farbe der Text im Tag b haben wird:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

Wenn Sie den Code studieren, sagen Sie welche Farbe der Text im Tag b haben wird:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

Wenn Sie den Code studieren, sagen Sie welche Farbe der Text im Tag b haben wird:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

Wenn Sie den Code studieren, sagen Sie welche Farbe der Text im Tag li haben wird:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

Wenn Sie den Code studieren, sagen Sie welche Farbe der Text im Tag li haben wird:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

Wenn Sie den Code studieren, sagen Sie welche Farbe der Text im Tag i haben wird:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

Wenn Sie den Code studieren, sagen Sie welche Größe der Text im Tag i haben wird:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}