Syntaxe avancée CSS

[Introduction] Regroupement de sélecteurs Vous pouvez regrouper des sélecteurs afin que les sélecteurs groupés puissent partager la même instruction. Utilisez des virgules pour séparer les sélecteurs qui doivent être regroupés. Dans l'exemple ci-dessous, nous avons regroupé tous les éléments de titre. Tous les éléments du titre sont verts. h1,h2,h3,h4,h5

Groupe de sélecteurs

Vous pouvez regrouper les sélecteurs afin que les sélecteurs groupés soient La même instruction peut être partagée. Utilisez des virgules pour séparer les sélecteurs qui doivent être regroupés. Dans l'exemple ci-dessous, nous avons regroupé tous les éléments de titre. Tous les éléments du titre sont verts.

h1,h2,h3,h4,h5,h6 {
couleur : vert;
}

L'héritage et ses problèmes

Selon CSS, les éléments enfants héritent des propriétés de leurs éléments parents. Mais cela ne fonctionne pas toujours ainsi. Jetez un œil à la règle suivante :

body {
font-family: Verdana, sans-serif;
>

Selon la règle ci-dessus, l'élément body du le site utilisera la police Verdana (si elle existe sur le système du visiteur).

Grâce à l'héritage CSS, les éléments enfants hériteront des attributs appartenant à l'élément de plus haut niveau (dans ce cas, body) (ces éléments enfants tels que p, td, ul, ol, ul, li, dl, dt et jj). Aucune règle supplémentaire n'est nécessaire, tous les éléments enfants du corps doivent afficher la police Verdana, ainsi que les éléments enfants de l'élément enfant. Et dans la plupart des navigateurs modernes, c’est effectivement le cas.

Mais à l'époque sanglante de la guerre des navigateurs, cela n'aurait peut-être pas eu lieu, lorsque la prise en charge des standards n'était pas une priorité pour les entreprises. Par exemple, Netscape 4 ne prend pas en charge l'héritage et non seulement il ignore l'héritage, mais il ignore également les règles qui s'appliquent à l'élément body. Il existe toujours un problème connexe dans IE/Windows jusqu'à IE6 où les styles de police dans les tableaux seront ignorés. Que devons-nous faire ?

Soyez gentil avec Netscape 4

Heureusement, vous pouvez le faire en utilisant une redondance que nous appelons les règles « Soyez gentil avec Netscape 4 » pour gérer le fait que les anciens navigateurs ne sont pas capables de comprendre l'héritage.

body {
font-family : Verdana, sans-serif;
}

p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}

4.0 Les navigateurs ne comprennent pas l'héritage, mais ils comprennent les sélecteurs de groupe. Bien que cela gaspille la bande passante de certains utilisateurs, cela doit être fait si vous devez prendre en charge les utilisateurs de Netscape 4.

L'héritage est-il une malédiction ?

Que faire si vous ne souhaitez pas que la police "Verdana, sans-serif" soit héritée par tous les éléments enfants ? Supposons que vous souhaitiez que la police de votre paragraphe soit Times. aucun problème. Créez une règle spéciale pour p afin qu'il supprime les règles de l'élément parent :

body {
font-family: Verdana, sans-serif;
}

td , ul, ol, ul, li, dl, dt, dd {
famille de polices : Verdana, sans-serif;
}

p {
famille de polices : Times, " Times New Roman", empattement ;
}

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!