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.
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.
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 .