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;
  }

Veuillez noter le contexte du code bleu marqué 8e99a69fbe029cd4e2b854e244eab143 :

<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, 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;
     }

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!