Sélecteurs dérivés CSS

[Introduction] Les sélecteurs dérivés vous permettent de rendre le balisage plus concis en définissant des styles basés sur le contexte de la position d'un élément. En CSS1, les sélecteurs qui appliquent les règles de cette manière sont appelés sélecteurs contextuels car ils s'appuient sur le contexte pour répondre aux

sélecteurs dérivés

Vous pouvez rendre le balisage plus concis en définissant des styles basés sur le contexte de l'emplacement d'un élément.

En CSS1, les sélecteurs qui appliquent les règles de cette manière sont appelés sélecteurs contextuels car ils s'appuient sur le contexte pour appliquer ou éviter une règle. En CSS2, ils sont appelés sélecteurs dérivés, mais peu importe comment vous les appelez, ils font la même chose.

Les sélecteurs dérivés vous permettent de styliser une balise en fonction du contexte du document. En utilisant judicieusement les sélecteurs dérivés, nous pouvons rendre notre code HTML plus propre.

Par exemple, si vous souhaitez que l'élément fort de la liste soit en italique au lieu du gras habituel, vous pouvez définir un sélecteur dérivé comme celui-ci :

li strong {
font -style : italique;
font-weight : normal;
}

Veuillez noter le contexte du code bleu marqué  :

< ;p> ;Je suis en gras, pas en italique, car je ne suis pas dans la liste, donc cette règle ne fonctionne pas pour moi

Mes mots sont en italique. C'est parce que l'élément fort est à l'intérieur d'un élément li.

Je suis une police normale.

Dans l'exemple ci-dessus, seul l'élément fort de l'élément li est mis en italique et il n'est pas nécessaire de définir une classe spéciale ou class pour l’identifiant de l’élément fort, le code est plus concis.

Regardez les règles CSS suivantes :

strong {
color: red;
}

h2 {
color: red;
>

h2 strong {
color: blue;
}

Voici le HTML qu'il affecte :

Le mot fortement accentué dans ce Le paragraphe estred.

Ce sous-titre est également rouge.

Le mot fortement accentué dans ce sous-titre est< strong>bleu.

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!