Selon notre compréhension de la priorité CSS, le dernier style CSS défini remplacera tous les styles existants ou en conflit définis avant lui, comme dans l'exemple suivant :
| Voici le contenu cité : Exemple de code source : p { couleur : rouge ; fond : jaune } |
Le paragraphe ci-dessus apparaîtra finalement en police verte avec un fond jaune. C'est parce que la dernière couleur définie : vert écrase le rouge précédemment défini. Quant à la raison pour laquelle le fond jaune ne disparaît pas, c'est à cause du deuxième p. définition contradictoire dans la définition, elle est donc toujours valable.
Voyons l'effet de course :
| Voici le contenu cité : Code source à exécuter : <!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 { couleur : rouge ; fond : jaune }p { couleur : vert }</style></head><body><p>admin5</p></body></ html> <p class="rouge vert bleu">www.admin5.com</p> <p class="vert bleu rouge">admin5</p> <p class="bleu rouge vert">www.admin5.com</p> |
Peut-être pensez-vous avoir déjà compris. Comprenez-vous vraiment ? Bon, faisons un petit test.
| Voici le contenu cité : Exemple de code source : .red { couleur : rouge } .green { couleur : vert } .bleu { couleur : bleu } ... <p class="rouge vert bleu">admin5</p> <p class="green blue red">Le paradis de l'apprentissage des webmasters</p> <p class="bleu rouge vert">www.admin5.com</p> |
S'il vous plaît, dites-moi, de quelle couleur apparaîtra le texte des trois paragraphes ci-dessus lorsqu'il sera finalement affiché ?
Ne vous précipitez pas pour exécuter le code suivant. Pensez-y, de quelle couleur sera-t-il ?
Bon, vous y avez déjà pensé, voyons l'effet du fonctionnement :
| Voici le contenu cité : Code source à exécuter : <!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>www.admin5.com< /title><style type="text/css">.red { couleur : rouge }.green { couleur : vert }.blue { couleur : bleu }</style></head><body><p class=" rouge vert bleu">admin5</p><p class="vert bleu rouge">Webmaster Learning Paradise</p><p class="blue red green">www.admin5.com</p></body > </html> |
La réponse est qu'ils sont tous affichés en bleu, c'est-à-dire bleus. Bien que chaque paragraphe ait trois styles de paragraphe appliqués dans un ordre différent, il semble que la couleur doive être déterminée en fonction de l'ordre dans lequel les styles sont appliqués. , le premier est affiché en bleu et le premier est affiché en bleu. Le deuxième est affiché en rouge et le troisième est affiché en vert. En fait, cela n'a rien à voir avec la commande. dans lequel les styles sont appliqués. Ils obéissent tous finalement au dernier style spécifié, et la couleur est bleue ! Ne vous inquiétez pas si vous rencontrez des problèmes similaires à l’avenir, car l’expérience ci-dessus vous a déjà donné la réponse.