Entendendo a especificidade de uma regra CSS

Cada regra CSS carrega informações que permite ao navegador conhecer seu peso ou especificidade e assim formatar nosso layout.

A regra geral é : " a regra CSS que está mais próxima do conteúdo prevalece" sobre qualquer outra regra CSS.

Mas em alguns casos podem haver alguns conflitos, vamos considerar as três regras abaixo:

#conteudo .titulo {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.9em;
}

.titulo {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 3em;
}

p {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.7em;
}

Neste caso, quanto maior for a especificidade de uma regra CSS, maior será a chance de prevalecer sobre outras regras.

Para entender melhor vamos analisar a tabela abaixo:



Analisando:- O seletor p tem especificidade 0,0,0,1
- O seletor .titulo tem especificidade 0,0,1,1
- O seletor # conteudo .titulo tem especificidade 0,1,1,1

Nesses exemplos, o último seletor tem uma maior especificidade e por isso vence em regras que tenham conflito.

Vale a dica para quando você estiver escrevendo a sua CSS do site, quando mais bem especificado melhor.


Comentários

  1. Parabéns de vez em quando venho passear por aqui
    e acabo aprendendo alguma coisa.Photoshop cs5 é demais,vi alguma coisa que fala sobre mudar fundo de video, vi também que da um trabalho doido.Se não for abusar da sua boa vontade será que você pode falar um pouco sobre isso.Desde já te agradeço e sem rasgação de seda seu blog é 10 bjs fica com Deus

    ResponderExcluir
  2. Olá!

    Obrigada. Sim, mudar fundo de um vídeo dá algum trabalho... mas colocar um fundo para vídeo no Photoshiop é fácil...

    Você pode dar uma olhada nesta aula: http://designap.blogspot.com/2010/10/importando-um-arquivo-de-video-para-o.html

    Abraços,

    Ana

    ResponderExcluir
  3. Obrigado por responder.Vi seu video atraves dele que aprendi existem muitos tutoriais sobre fotos
    mas quando se fala em video no photoshop a carência é muito grande de informação.Obrigada mais uma vez e estou aqui atenta as suas aulas
    abraços

    ResponderExcluir
  4. De nada!

    Vou ver se posto mais alguma informação sobre vídeo no Photoshop...

    Abraços,

    Ana

    ResponderExcluir
  5. Valeu Ana obrigado mais uma vez.Fico aguardando
    abraços
    Marlene

    ResponderExcluir
  6. Passei aqui pra te desejar boas festas e agradecer
    adqueri mas conhecimento aqui valeu mesmo
    Felicidade!!!!!!
    Marlene

    ResponderExcluir
  7. Obrigada :)

    Para vc, também e em dobro :)

    Abraços,

    Ana

    ResponderExcluir

Postar um comentário

Deixe seu comentário ou dúvida:

Postagens mais visitadas deste blog

Estrutura básica de documento em HTML5

Adição e subtração de paths no Photoshop CS4