Como substituir os estilos CSS3

Com estilos CSS3 herdadas vem a capacidade de substituir uma regra de estilo herdado. Por exemplo, dê uma olhada no seguinte código para obter uma idéia do que isso pode significar:

overRide.html
Este div tem apenas o estilo do corpo.
Este é um parágrafo normal com o parágrafo styling
Este parágrafo é um membro de uma classe
Este parágrafo é um membro de uma classe e tem um ID, ambos com regras de estilo.

A questão é esta: que cor será o que cor elemento de exibição? É um membro do corpo, por isso deve ser vermelho. É também um parágrafo e parágrafos são verdes. É também um membro da minha classe classe, por isso deve ser azul. Finalmente, é nomeado whatColor, e elementos com este ID deve ser roxo.

Quatro regras de cor aparentemente conflitantes são lançadas sobre esta pobre elemento. Qual a cor que vai ser?

CSS tem um sistema de classificação clara para lidar com este tipo de situação. Em regras mais específicas trunfo regras gerais, mais gerais. Aqui está a precedência (do maior para o menor prioridade):

  1. preferência do usuário

    O usuário sempre tem a escolha final sobre o que estilos são usados. Os usuários não são obrigados a usar todos os estilos em tudo e sempre pode alterar a folha de estilo para a sua própria cópia local da página. Se um usuário precisa aplicar um estilo especial (por exemplo, alto contraste para pessoas com deficiência visual), ele deve sempre ter essa opção.

  2. estilo local

    Um estilo local (definido com o estilo atributo no HTML) tem a maior precedência dos estilos definidos pelo desenvolvedor. Ele anula quaisquer outros estilos.

  3. identidade

    Um estilo ligados a um elemento identidade tem uma grande quantidade de peso, porque ele substitui quaisquer outros estilos definidos na folha de estilo.

  4. Classe

    Estilos ligados a uma classe substituir o estilo de um elemento do objeto. Então, se você tem um parágrafo com uma cor verde que pertence a uma classe de cor azul, o elemento será azul, porque estilos de classe excedo estilos de elemento.

  5. Elemento

    O estilo de elemento tem precedência sobre qualquer um dos seus recipientes. Por exemplo, se um número está dentro de um div, o estilo de parágrafo tem o potencial para substituir tanto o div e o corpo.

  6. elemento de contêiner

    divs, tabelas, listas e outros elementos usados ​​como recipientes de passar seus estilos por diante. Se um elemento está dentro de um ou mais desses recipientes, ele pode herdar atributos de estilo a partir deles.

  7. Corpo

    Nada definido no estilo de corpo é um padrão geral da página, mas ele vai ser substituído por quaisquer outros estilos.

No overRide.html exemplo, a identidade regra tem precedência, então o parágrafo é exibido em roxo.

Semelhante

menu