Comment utiliser le sélecteur dérivé CSS

Comment utiliser les sélecteurs dérivés CSS : les sélecteurs dérivés permettent de déterminer le style d'une certaine balise en fonction du contexte du document. En utilisant les sélecteurs dérivés de manière rationnelle, le code HTML peut être rendu plus propre.

(Tutoriel recommandé : Tutoriel vidéo CSS)

Comment utiliser le sélecteur dérivé CSS :

Vous pouvez 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 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: italic;
    font-weight: normal;
  }

Veuillez noter la marque 8e99a69fbe029cd4e2b854e244eab143 Le contexte du code bleu :

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

Dans l'exemple ci-dessus, seul l'élément fort de l'élément li est stylisé en italique. Il n'est pas nécessaire de définir une classe ou un identifiant spécial pour l'élément fort, et. le code est plus concis.

Regardez à nouveau la règle CSS suivante :

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

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>

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!