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内容区域
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

//相关数据及事件区域，通俗说就是我们写JS代码的地方
<script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  }
}
</script>

// CSS样式区域
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello { color: #efefef; }
</style>

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 :

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

Résultat de la conversion :

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

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 :

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

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

<template>
    <div class="wrap">
        <p>Hello world</p>
    </div>
</template>

<style scoped>
    .wrap {
        color: #ffffff;
        background: #666666;
    }
</style>

composant parent

<template>
    <div class="wrap">
       //ChildMOdul为上面的子组件 
       <ChildModul/>
    </div>
</tamplate>
<style scoped>
//子组件根元素样式
    .wrap {
        margin: 0 10px
    }
</style>

Le composant enfant définit une couleur d'arrière-plan. comme la couleur #efefef Pour le style de #ccc, dans l'élément parent, une bordure de 10px est définie pour l'élément racine du composant enfant, et le style final affiché par le module enfant est comme ceci :

As vous pouvez voir sur l'image ci-dessus, le style enfant d'un composant est le résultat de la combinaison de l'élément racine du composant enfant dans le composant parent et des styles CSS étendus dans le composant enfant.

Sélecteur à action en profondeur

Si vous souhaitez qu'un sélecteur dans un style étendu agisse "plus en profondeur", par exemple en affectant les composants enfants, vous pouvez utiliser l'opérateur >>> Sera compilé dans :

<style scoped>
.a >>> .b { /* ... */ }
</style>

Certains préprocesseurs comme Sass ne peuvent pas analyser correctement>>>. Dans ce cas, vous pouvez utiliser l'opérateur /deep/ à la place – il s'agit d'un alias pour >>> Essayez d'utiliser le code précédent et utilisez le sélecteur de profondeur pour définir le style du composant enfant dans le composant parent :

Composant parent

.a[data-v-f3f3eg9] .b { /* ... */ }

Rendu :

Vous pouvez voir depuis la hauteur que le style a été appliqué au composant enfant. Je sais que vous voudrez peut-être demander pourquoi vous utilisez /deep/ au lieu de >>> si vous ne voyez pas le présélecteur Sass, je ne le sais pas en premier. n'a pas fonctionné. Ensuite, je suis passé à /deep/ et le style était efficace. Pour être irresponsable, si >>> ne fonctionne pas, remplacez-le simplement par /deep/. Quoi qu'il en soit, le but est de permettre aux styles écrits dans le composant parent de pénétrer dans les composants enfants. . .

Contenu généré dynamiquement

Le contenu DOM créé via v-html n'est pas affecté par les styles compris dans la portée. Mais vous pouvez toujours les styliser via des sélecteurs d'action approfondis.

Attention aux événements

• La portée CSS ne peut pas remplacer la classe :

  Compte tenu de la façon dont les navigateurs affichent divers sélecteurs CSS, lorsque p{ color: red } a une portée définie (c'est-à-dire avec une sélection d'attribut lorsqu'il est utilisé en combinaison avec d'autres processeurs) seront plusieurs fois plus lents. Si vous utilisez plutôt une classe ou un identifiant, tel que .example { color: red }, l'impact sur les performances sera éliminé.

• Soyez prudent avec les sélecteurs descendants dans les composants récursifs

  Pour les règles CSS dans les sélecteurs .a .b, si un élément correspondant à .a contient un composant enfant récursif, tous les composants enfants dans .b seront mis en correspondance par cette règle.

Apprentissage recommandé :

Tutoriel vidéo CSS

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!