Maison > interface Web > tutoriel CSS > Pourquoi mes propriétés personnalisées imbriquées à portée CSS sont-elles ignorées ?

Pourquoi mes propriétés personnalisées imbriquées à portée CSS sont-elles ignorées ?

Linda Hamilton
Libérer: 2024-12-23 13:55:17
original
869 Les gens l'ont consulté

Why Are My Nested CSS Scoped Custom Properties Being Ignored?

Propriété personnalisée à portée CSS ignorée dans les déclarations imbriquées

Lors de la définition de propriétés personnalisées dans CSS, il est essentiel de comprendre comment la portée affecte leur évaluation. Les propriétés personnalisées étendues ne sont disponibles que localement dans l'élément ou le composant où elles sont définies. Cependant, un défi courant se pose lorsque l'on tente d'utiliser des propriétés personnalisées étendues dans des étendues externes.

Dans ce cas spécifique, l'objectif est de définir un facteur d'échelle via une propriété personnalisée et de l'appliquer à différents éléments. Cependant, comme démontré, tous les éléments de la liste sont mis à l'échelle de la même manière, quelle que soit la classe d'échelle appliquée.

Pour résoudre ce problème, il est crucial de noter que les propriétés personnalisées sont évaluées de haut en bas. Lorsqu'une propriété personnalisée est définie au niveau racine, comme dans cet exemple, toute définition ultérieure de la même propriété dans les éléments imbriqués sera ignorée.

Considérez cette illustration simplifiée :

:root {
  --color: var(--c, blue);
}

span {
  color: var(--color);
}
Copier après la connexion

Ici, la propriété personnalisée --color est définie au niveau racine. Si nous essayons de le remplacer dans un élément span :

<div>
  <div class="box">
    <span>
Copier après la connexion

L'élément span avec la déclaration CSS imbriquée ne deviendra pas rouge. En effet, la propriété personnalisée a déjà été évaluée au niveau racine, en définissant --color sur bleu, et les tentatives de substitution sont ignorées.

En revanche, l'élément span avec l'héritage --c: red deviendra rouge car il hérite de la valeur de la propriété personnalisée de son élément parent.

Pour obtenir l'effet souhaité, il est nécessaire de s'assurer que la propriété personnalisée est évaluée individuellement dans chaque composant imbriqué. Cela peut être fait en définissant la propriété localement au sein de chaque classe ou composant, plutôt qu'au niveau racine.

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal