Comment définir la portée CSS

En CSS, vous pouvez utiliser l'attribut scoped pour définir la portée ; lorsque la balise de style a l'attribut scoped, son CSS n'affecte que les éléments du composant actuel. Cependant, le nœud racine d'un composant enfant sera affecté à la fois par son CSS de portée parent et par le CSS de portée du composant enfant.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Lorsque je suis entré en contact pour la première fois avec Vue Single File, j'étais un peu confus au sujet de l'attribut scoped dans la balise style. Après tout, je ne l'ai jamais utilisé auparavant. Voici quelques explications sur scoped.

Un fichier .vue standard ressemble à ceci :

// html内容区域  //相关数据及事件区域，通俗说就是我们写JS代码的地方  // CSS样式区域  

Vous pouvez voir qu'il y a un attribut scoped dans la balise style. Lorsque la balise style a un attribut scoped, son CSS n'affecte que les éléments du composant actuel. Ceci est similaire à l’encapsulation de style dans le shadow DOM. Il comporte quelques réserves, mais ne nécessite aucun profil. Il réalise la transformation suivante en utilisant PostCSS :

Résultat de la conversion :

Mélange de styles locaux et globaux

Une chose à noter est que vous pouvez utiliser à la fois des styles avec et sans portée dans un composant :

Le Le style de l'élément enfant est le résultat de la coopération entre l'élément racine de l'élément enfant et le CSS au sein du composant enfant

Après avoir utilisé scoped, le style de la portée parent ne pénétrera pas dans le composant enfant. Cependant, le nœud racine d'un composant enfant sera affecté à la fois par son CSS de portée parent et par le CSS de portée du composant enfant. Cette conception permet au composant parent d'ajuster le style de l'élément racine de son composant enfant du point de vue de la mise en page. L'exemple est le suivant :

composant enfant

composant parent