De acordo com nosso entendimento de precedência CSS, o último estilo CSS definido substituirá todos os estilos existentes ou conflitantes definidos antes dele, como no exemplo a seguir:
| A seguir está o conteúdo citado: Exemplo de código-fonte: p {cor: vermelho; fundo: amarelo} |
O parágrafo acima eventualmente aparecerá em fonte verde com fundo amarelo. Isso ocorre porque a última cor definida: verde substitui o vermelho definido anteriormente. definição conflitante na definição, portanto ainda é válida.
Vamos ver o efeito de execução:
| A seguir está o conteúdo citado: Código fonte para execução: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title><; style type="text/css">p { cor: vermelho; fundo: amarelo }p { cor: verde }</style></head><body><p>admin5</p></body></ HTML> <p class="vermelho verde azul">www.admin5.com</p> <p class="verde azul vermelho">admin5</p> <p class="azul vermelho verde">www.admin5.com</p> |
Talvez você pense que já entendeu. Você realmente entende? Ok, vamos fazer um pequeno teste.
| A seguir está o conteúdo citado: Exemplo de código-fonte: .red {cor: vermelho} .verde {cor: verde} .azul {cor: azul} ... <p class="vermelho verde azul">admin5</p> <p class="green blue red">Paraíso de aprendizado para webmasters</p> <p class="azul vermelho verde">www.admin5.com</p> |
Por favor, diga-me, de que cor aparecerá o texto dos três parágrafos acima quando for finalmente exibido?
Por favor, não se apresse em executar o código a seguir. Pense nisso, de que cor será?
Ok, você já pensou nisso, vamos ver o efeito da operação:
| A seguir está o conteúdo citado: Código fonte para execução: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html" /><title>www.admin5.com<; /title><style type="text/css">.red { color: red }.green { color: green }.blue { color: blue }</style></head><body><p class=" vermelho verde azul">admin5</p><p class="green blue red">Paraíso de aprendizagem para webmasters</p><p class="blue red green">www.admin5.com</p></body > </html> |
A resposta é que todos eles são exibidos em azul, ou seja, azul. Embora cada parágrafo tenha três estilos de parágrafo aplicados em uma ordem diferente, parece que a cor deve ser determinada de acordo com a ordem em que os estilos são aplicados. , o primeiro é exibido em azul e o primeiro é exibido em azul. O segundo é exibido em vermelho e o terceiro é exibido em verde. Na verdade, isso não tem nada a ver com o pedido. em que os estilos são aplicados, todos obedecem ao último estilo especificado e a cor é azul! Não se preocupe se encontrar problemas semelhantes no futuro, porque a experiência acima já lhe deu a resposta.