Zusammenfassung der Verwendung des CSS-Bereichs (Stilaufteilung)

1. Verwendung des CSS-Bereichs (Stilaufteilung)

In Vue den CSS-Stil nur in der aktuellen Komponente wirksam machen: scoped Attribut ist ein neues Attribut in HTML5. Es ist ein Boolean-Attribut. Wenn dieses Attribut verwendet wird, wird der Stil nur auf das übergeordnete Element und dessen untergeordnete Elemente des Stilelements angewendet.

2. Implementierungsprinzip von Scoped

Die Wirkung von bereichsbezogenen Attributen in Vue wird hauptsächlich durch PostCSS-Übersetzung erreicht. Das Folgende ist der Vue-Code vor der Übersetzung:

  <Stilbereich>
    .prüfen {
      Farbe: blau;
    }
  </Stil>
  
  <Vorlage>
    <div class="test">Hallo Welt</div>
  </Vorlage>

Nach der Übersetzung:

  <Stil>
    .test[data-v-5559930f] {
      Farbe: blau;
    }
  </Stil>
  
  <Vorlage>
    <div class="test" data-v-5559930f>Hallo Welt</div>
  </Vorlage>

PostCSS fügt allen DOM in einer Komponente eine eindeutige dynamische Eigenschaft hinzu und fügt dann dem CSS-Selektor einen zusätzlichen entsprechenden Attributselektor hinzu, um das DOM in der Komponente auszuwählen. Dieser Ansatz bewirkt, dass der Stil nur auf dem DOM funktioniert, das die Eigenschaft <component internal DOM> enthält.

3. Scoped-Penetrationsmethode

In vielen Projekten müssen Sie beim Verweisen auf eine Drittanbieterkomponente den Stil der Drittanbieterkomponente lokal in der Komponente ändern, möchten jedoch das Gültigkeitsbereichsattribut nicht entfernen, da dies zu einer Stilverfälschung zwischen den Komponenten führen könnte. Derzeit sind einige spezielle Methoden erforderlich, um in den Bereich einzudringen.

Methode 1: Verwenden Sie >>>, um in das Gültigkeitsattribut einzudringen und die Stile anderer Komponenten von Drittanbietern zu ändern.

Methode 2: Verwenden Sie zwei style Tags, einen mit einem scoped und einen ohne scoped , um den Stil von Komponenten von Drittanbietern zu ändern.

Methode 3: Verwenden Sie Sass- oder weniger Stile, um /deep/ einzudringen

Methode 4: Unterscheiden Sie, indem Sie auf der äußersten Ebene id oder class hinzufügen.

Dies ist das Ende dieses Artikels über CSS-Bereich (Stilaufteilung). Weitere relevante Inhalte zum CSS-Bereich finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!