Schriftfarbe in DIV (CSS) ändern

Lesezeit: 2 Minuten

Ich versuche, die Farbe und Größe der H2-Schriftart und der H2-Link-Schriftarten basierend auf dem Div, in dem sie sich befinden, zu ändern, war aber nicht erfolgreich. Was mache ich falsch?

 <style>
h2 {
color:fff;
font-size: 20px;
}
social.h2 {
color:pink;
font-size: 14px;
}
social.h2.h2color {
color:purple;
font-size: 10px;
}
tv.h2 {
color:green;
font-size: 14px;
}
tv.h2.h2color {
color:orange;
font-size: 10px;
}
 </style>

 <h2>List of Companies </h2>
 <div class="social">

 <h2>     <A href="http://www.facebook.com">Facebook     </a>
 <span class="h2color">Found in 2004     </span>     </h2> 
 blah blah blah 

 <h2>     <A href="http://www.twitter.com">Twitter     </a>
 <span class="h2color">Found in 2007     </span>     </h2>
 blah blah blah 

 </div>


 <div class="tv">

 <h2>     <A href="http://www.fox.com">Fox     </a>
 <span class="h2color">Found in 2004     </span>     </h2> 
 blah blah blah 

 <h2>     <A href="http://www.nbc.com">NBC     </a>
 <span class="h2color">Found in 2007     </span>     </h2>
 blah blah blah 
 </div>

Ich versuche es so aussehen zu lassen:

Geben Sie hier die Bildbeschreibung ein

Ihr erster CSS-Selektor—social.h2— sucht nach dem Element „social“ in der Klasse „h2“, z. B.:

<social class="h2">

Klassenselektoren wird ein Punkt vorangestellt (.). Verwenden Sie außerdem ein Leerzeichen (), um anzuzeigen, dass sich ein Element in einem anderen befindet. Ein zu finden <h2> Nachkomme eines Elements in der social Klasse, versuchen Sie etwas wie:

.social h2 {
  color: pink;
  font-size: 14px;
}

Um ein besseres Verständnis von CSS-Selektoren zu bekommen und wie sie verwendet werden, um auf Ihren HTML-Code zu verweisen, schlage ich vor, die interaktive HTML- und CSS-Tutorials von CodeAcademy. Ich hoffe, dass dies hilft, Sie in die richtige Richtung zu weisen.

  • süß, danke! Dies funktionierte perfekt für die H2. Gibt es eine Möglichkeit, die H2-Links auch zu ändern? auch scheint es, als ob die H2s in der div relativ sind. Wenn ich also eine 14-Pixel-Schriftart haben möchte, wird sie kleiner als sie sollte

    – Mike

    21. Oktober 2012 um 16:37 Uhr

  • Mike, versuche einen Selektor wie: .social h2 a für die Gestaltung Ihres Links (<a>) Elemente.

    – Schwarzer Mantel

    21. Oktober 2012 um 16:48 Uhr

Um Links zu tun, können Sie tun

.social h2 a:link {
  color: pink;
  font-size: 14px;   
}

Sie können auch das Design von Hover, besuchten und aktiven Links ändern. Ersetzen Sie einfach “link” durch das, was Sie stylen möchten. Weitere Informationen finden Sie auf der w3schools-Seite CSS-Links.

1066500cookie-checkSchriftfarbe in DIV (CSS) ändern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy