Maison  >  Article  >  interface Web  >  Pourquoi la définition d'un attribut \'title\' sur une balise `` empêche-t-elle le rendu des styles CSS ?

Pourquoi la définition d'un attribut \'title\' sur une balise `` empêche-t-elle le rendu des styles CSS ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-30 22:36:02476parcourir

Why Does Setting a 'title' Attribute on a `` Tag Prevent CSS Styles from Rendering?

Pourquoi le L'attribut 'title' interfère avec le rendu CSS ?

Le document HTML fourni tente d'appliquer à la fois a.css et b.css aux éléments de la page. Cependant, les styles de b.css ne sont pas rendus, comme le démontre l'extrait de code.

En définissant l'attribut title sur le élément lié à b.css, la feuille de style est classée comme « feuille de style préférée ». En revanche, les feuilles de style sans l'attribut title sont considérées comme des « feuilles de style persistantes ». Selon la spécification HTML :

Types de feuilles de style

  • Feuilles de style persistantes : Liées avec rel="stylesheet" et aucun attribut de titre. Toujours appliqué lors du rendu.
  • Feuilles de style préférées : Liées avec rel="stylesheet" et un attribut de titre. Regroupés par titre, mais les navigateurs n'affichent qu'une seule feuille de style préférée par groupe.
  • Feuilles de style alternatives : Liées avec rel="feuille de style alternative" et un titre. Regroupé par titre, permettant aux utilisateurs de sélectionner des feuilles de style à partir d'une interface fournie par le navigateur.

Dans ce cas, en ajoutant l'attribut title, vous classez par inadvertance b.css comme feuille de style préférée. Comme il ne doit y avoir qu'une seule feuille de style préférée par groupe, le navigateur choisit l'une des feuilles de style à afficher, ce qui entraîne l'exclusion de b.css.

Par conséquent, pour garantir que a.css et b.css sont appliqués, vous devez supprimer l'attribut title du élément lié à b.css. Cela la classera comme feuille de style persistante, garantissant qu'elle est utilisée avec a.css lors du rendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn