Maison > interface Web > tutoriel CSS > Par quoi le sélecteur dérivé CSS est-il défini ?

Par quoi le sélecteur dérivé CSS est-il défini ?

(*-*)浩
Libérer: 2019-11-23 18:02:16
original
2760 Les gens l'ont consulté

Par quoi le sélecteur dérivé CSS est-il défini ?

Sélecteurs dérivés CSS

Vous pouvez rendre le balisage plus concis en définissant des styles basés sur le contexte d'un élément dans sa position. (Apprentissage recommandé : Tutoriel vidéo CSS)

En CSS1, les sélecteurs qui appliquent des règles de cette manière sont appelés sélecteurs contextuels car ils dépendent d'appliquer ou d'éviter une règle selon le contexte. 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: italic;
    font-weight: normal;
  }
Copier après la connexion

Veuillez noter le contexte du code bleu marqué  :

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>

<ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li>
</ol>
Copier après la connexion

Dans l'exemple ci-dessus, seul l'élément fort de l'élément li est stylisé en italique, pas besoin de Le fort L'élément définit une classe ou un identifiant spécial, rendant le code plus concis.

Regardez à nouveau la règle CSS suivante :

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }
Copier après la connexion

Voici le HTML qu'elle affecte :

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
Copier après la connexion

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:
css
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