Les règles CSS sont appliquées sans classes, pourquoi ?
P粉795311321
P粉795311321 2023-09-04 13:26:05
0
1
562
<p>Je définis les règles CSS : </p> <pre class="brush:php;toolbar:false;">.info-specs h2, h3, h4, h5 { taille de police : 1,5em ; transformation de texte : aucune ; }</pré> <p>Cela ne devrait fonctionner que pour h5 dans les éléments avec la classe "info-specs". Cependant, après inspection, j'ai découvert que d'autres éléments h5 utilisent également cette règle. Pourquoi? Voici un exemple : </p> <p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>.info-specs h2, h3, h4, h5 { taille de police : 5em ; transformation de texte : aucune ; }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><h5>mytest </h5></code></pre> </p>
P粉795311321
P粉795311321

répondre à tous(1)
P粉308089080

L'interpréteur CSS du navigateur recherchera tout ce qui se trouve dans h3h4h5 元素,并且仅查找 h2 它将查看它是否在 .info-specs. Les sélecteurs à virgule ou groupés traitent tout ce qui est séparé par des virgules comme des sélections distinctes.

Les solutions possibles à votre problème sont :

/* These select for any h2, h3, h4 and h5 within .info-specs */

.info-specs h2,
.info-specs h3,
.info-specs h4,
.info-specs h5
{
  text-decoration: underline;
}

/* These select for ant h2, h3, h4 and h5 that are direct chldren of .info-specs */
.info-specs > h2,
.info-specs > h3,
.info-specs > h4,
.info-specs > h5
{
  color: red;
}
<div class="info-specs">
  <p>In this example the headings within inf-specs will all be underlined but only the headings that are direct children of info-specs will be coloured red.</p>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <div>
    <h3>Heading 3 in another div</h3>
  </div>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
</div>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal