So legen Sie den CSS-Bereich fest

In CSS können Sie das Attribut „scoped“ verwenden, um den Bereich festzulegen. Wenn das Style-Tag das Attribut „scoped“ hat, wirkt sich sein CSS nur auf die Elemente in der aktuellen Komponente aus. Der Stammknoten einer untergeordneten Komponente wird jedoch sowohl von ihrem übergeordneten CSS als auch vom CSS der untergeordneten Komponente beeinflusst.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Als ich zum ersten Mal mit Vue Single File in Kontakt kam, war ich etwas verwirrt über das Scoped-Attribut im Style-Tag. Schließlich habe ich es noch nie zuvor verwendet.

Eine Standard-.vue-Datei sieht so aus:

// 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>

Sie können sehen, dass das Style-Tag ein Attribut mit Gültigkeitsbereich enthält. Sein CSS wirkt sich nur auf die Elemente in der aktuellen Komponente aus. Dies ähnelt der Stilkapselung im Schatten-DOM. Es weist einige Einschränkungen auf, erfordert jedoch kein Profil. Durch die Verwendung von PostCSS wird die folgende Transformation erreicht:

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

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

Konvertierungsergebnis:

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

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

Mischung lokaler und globaler Stile

Bemerkenswert ist, dass Sie in einer Komponente sowohl Stile mit und ohne Gültigkeitsbereich verwenden können:

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

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

The Der Stil des untergeordneten Elements ist das Ergebnis der Zusammenarbeit zwischen dem Stammelement des untergeordneten Elements und dem CSS innerhalb der untergeordneten Komponente.

Nach der Verwendung von Scoped dringt der Stil des übergeordneten Bereichs nicht in die untergeordnete Komponente ein. Der Stammknoten einer untergeordneten Komponente wird jedoch sowohl von ihrem übergeordneten CSS als auch vom CSS der untergeordneten Komponente beeinflusst. Dieses Design dient dazu, dass die übergeordnete Komponente den Stil des Stammelements ihrer untergeordneten Komponente aus Layout-Perspektive anpassen kann. Das Beispiel sieht wie folgt aus:

untergeordnete Komponente

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

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

übergeordnete Komponente

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

Die untergeordnete Komponente definiert eine Hintergrundfarbe als #efefef-Farbe Für den Stil von #ccc wird im übergeordneten Element ein Rahmen von 10 Pixeln für das Stammelement der untergeordneten Komponente definiert, und der vom untergeordneten Modul angezeigte endgültige Stil lautet wie folgt:

As Sie können dem Bild oben entnehmen, dass der untergeordnete Stil einer Komponente das Ergebnis der Kombination des Stammelements der untergeordneten Komponente in der übergeordneten Komponente und der bereichsbezogenen CSS-Stile in der untergeordneten Komponente ist.

Tiefenwirkender Selektor

Wenn Sie möchten, dass ein Selektor in einem Bereichsstil „tiefer“ wirkt, z. B. auf untergeordnete Komponenten, können Sie den Operator >>> verwenden:

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

Der obige Code wird Wird kompiliert in:

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

Einige Präprozessoren wie Sass können nicht richtig analysieren>>>. In diesem Fall können Sie stattdessen den /deep/-Operator verwenden – dies ist ein Alias ​​für >>> und funktioniert genauso gut. Versuchen Sie es mit dem vorherigen Code und legen Sie mit der Tiefenauswahl den Stil der untergeordneten Komponente in der übergeordneten Komponente fest:

Übergeordnete Komponente

.wrap /deep/ .child--css {
    font-size: 36px;
  }

Rendering:

Anhand der Höhe können Sie erkennen, dass der Stil auf die angewendet wurde untergeordnete Komponente. Ich weiß, dass Sie vielleicht fragen möchten, warum Sie /deep/ anstelle von >>> verwenden, wenn Sie den Sass-Preselector nicht sehen hat nicht funktioniert. Dann habe ich zu /deep/ gewechselt und der Stil war effektiv. Um unverantwortlich zu sein: Wenn >>> nicht funktioniert, ändern Sie es einfach in /deep/. Der Zweck besteht jedoch darin, den in der übergeordneten Komponente geschriebenen Stilen das Eindringen in die untergeordneten Komponenten zu ermöglichen. . .

Dynamisch generierte Inhalte

Über V-HTML erstellte DOM-Inhalte werden von Stilen innerhalb des Geltungsbereichs nicht beeinflusst. Sie können sie aber immer noch über Deep-Action-Selektoren gestalten.

Vorsicht vor Ereignissen

• Der CSS-Bereich kann die Klasse nicht ersetzen: Unter Berücksichtigung der Art und Weise, wie Browser verschiedene CSS-Selektoren rendern, wenn p{ color: red } einen Gültigkeitsbereich hat (d. h. mit Attributauswahl, wenn es in Kombination mit anderen verwendet wird). Prozessoren) um ein Vielfaches langsamer sein. Wenn Sie stattdessen eine Klasse oder eine ID verwenden, z. B. .example { color: red }, werden die Auswirkungen auf die Leistung beseitigt.

• Seien Sie vorsichtig mit untergeordneten Selektoren in rekursiven Komponenten. Wenn bei CSS-Regeln in den Selektoren .a .b ein mit .a übereinstimmendes Element eine rekursive untergeordnete Komponente enthält, werden alle untergeordneten Komponenten in .b von dieser Regel abgeglichen.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie den CSS-Bereich fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!