HTML-Newbie: Vererbung unterbinden

Beitrag lesen

Hallo,

wir sollen zu folgendem HTML-Code eine externe CSS-Datei erstellen:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  
<html>  
	<head>  
	    <link rel="stylesheet" type="text/css" href="style.css">  
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >  
		<title>Aufgabe 2 - CSS lernen</title>  
	</head>  
  
	<body>  
		<h1>Ich bin eine logisch ausgezeichnete HTML seite</h1>  
		<div id="id1">div mit ID id1</div>  
		<div class="class1">div mit Klasse class1</div>  
		<div class="class1">  
			div mit Klasse class1  
			<div class="class2">div mit ID class2</div>  
		</div>  
		<div class="class2">div mit ID class2</div>  
	</body>  
  
</html>  

Konkret: "Die Blöcke mit Klasse "class1" sollen mit weißer Schrift auf blauem Hintergrund angezeigt werden. Verwenden Sie dafür die Eigenschaft
"background-color"."

Das Problem ist, wenn ich .class1 { background-color:blue; color:white; } schreibe, wird das auch auf das Kindelement vererbt, was nicht sein darf.

Ich habe bisher sämtliche Pseudoklassen durchprobiert, aber mir gelingt es nicht, die Vererbung zu unterbinden...

Sieht jemand wie das geht?

Vielen Dank!

Gruß
HTML-Newbie