Según nuestra comprensión de la precedencia de CSS, el último estilo CSS definido anulará todos los estilos existentes o en conflicto definidos antes, como en el siguiente ejemplo:
| El siguiente es el contenido citado: Código fuente de ejemplo: pag {color: rojo; fondo: amarillo} |
El párrafo anterior eventualmente aparecerá en fuente verde con un fondo amarillo. Esto se debe a que el último color definido: el verde sobrescribe el rojo previamente definido. En cuanto a por qué el fondo amarillo no desaparece, es por la segunda p. definición contradictoria en la definición, por lo que sigue siendo válida.
Veamos el efecto de carrera:
| El siguiente es el contenido citado: Código fuente para ejecutar: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Tipo de contenido" content="text/html" charset=gb2312" /><title>admin5</title>< estilo tipo="text/css">p { color: rojo; fondo: amarillo }p { color: verde }</style></head><body><p>admin5</p></body></ HTML> <p class="rojo verde azul">www.admin5.com</p> <p class="verde azul rojo">admin5</p> <p class="azul rojo verde">www.admin5.com</p> |
Tal vez creas que ya lo entiendes. ¿Realmente lo entiendes? Bien, hagamos una pequeña prueba.
| El siguiente es el contenido citado: Código fuente de ejemplo: .rojo {color: rojo} .verde {color: verde} .azul {color: azul} ... <p class="rojo verde azul">admin5</p> <p class="green blue red">El paraíso del aprendizaje para webmasters</p> <p class="azul rojo verde">www.admin5.com</p> |
Por favor, dígame, ¿de qué color aparecerá el texto de los tres párrafos anteriores cuando finalmente se muestre?
No se apresure a ejecutar el siguiente código. Piénselo, ¿de qué color será?
Bien, ya lo has pensado, veamos el efecto de la operación:
| El siguiente es el contenido citado: Código fuente para ejecutar: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//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>www.admin5.com< /title><style type="text/css">.red { color: rojo }.verde { color: verde }.azul { color: azul }</style></head><body><p class=" rojo verde azul">admin5</p><p class="verde azul rojo">Paraíso de aprendizaje para webmasters</p><p class="azul rojo verde">www.admin5.com</p></body > </html> |
La respuesta es que todos se muestran en azul, es decir, azul. Aunque cada párrafo tiene tres estilos de párrafo aplicados en un orden diferente, parece que el color debe determinarse según el orden en que se aplican los estilos. , el primero se muestra en azul y el primero en azul, el segundo en rojo y el tercero en verde. De hecho, esto no tiene nada que ver con el orden. en el que se aplican los estilos, en última instancia, todos obedecen al último estilo especificado, ¡y el color es azul! No se preocupe si encuentra problemas similares en el futuro, porque el experimento anterior ya le ha dado la respuesta.