Mudar a cor dos tipos de letra no DIV (CSS)

estou a tentar mudar a cor e o tamanho dos tipos de letra H2 e dos tipos de letra H2 com base no div em que estão, mas que não foram bem sucedidos. O que estou a fazer de errado?

 <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>
Estou a tentar fazer com que pareça isto.

enter image description here

 21
Author: Mike, 2012-10-21

2 answers

O teu primeiro selector de CSS-social.h2 - está à procura do elemento "social" na classe" h2", por exemplo:

<social class="h2">

Os selectores de classe são proseguidos com um ponto (.). Além disso, use um espaço () to indicate that one element is inside of another. To find an <h2> descendente de um elemento na classe social, tente algo como:

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

Para obter uma melhor compreensão dos selectores de CSS e de como eles são usados para referenciar o seu HTML, sugiro passar pelos tutoriais interactivos de HTML e CSS do CodeAcademy . Espero que isto ajude a apontar-te na direcção certa.

 18
Author: Blackcoat, 2012-10-21 16:22:15

Para fazer links, você pode fazer

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

Você também pode mudar o estilo hover, visitado e link activo. Basta substituir "link" com o que você quer estilo. Você pode aprender mais na página w3schools CSS Links .

 5
Author: Wilson Biggs, 2012-10-21 16:54:21