Maison > interface Web > tutoriel CSS > Sélecteurs dérivés CSS

Sélecteurs dérivés CSS

巴扎黑
Libérer: 2017-03-18 13:34:00
original
1774 Les gens l'ont consulté

[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!

    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    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
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal