Kommentar: Die HTML5 -Transformation hat uns viele sehr nützliche neue Attribute wie Platzhalter, Download, Hidden usw. gebracht. Jedes neue Attribut bringt uns neue Kontrollmethoden und Kontrolleffekte auf Seitenelemente mit sich
Insbesondere gibt es ein neues Attribut, das es uns ermöglicht, die Eigenschaften mehrerer Elemente zu steuern, nämlich: Scoped. Das neu erschienene skopierte Attribut auf dem Style -Tag kann den CSS -Stil nur für lokale Elemente wirksam machen. Insbesondere die Kinderelemente des Elements, das diesen Stil speichert, wirksam. Der einzige Unterschied zum üblichen Stil besteht darin, dass ein neues Scoped -Attribut hinzugefügt wird:
<style Scoped>
/ * Stile gehen hier *////
</style>
Stile mit Scoped -Attributen werden nur auf das aktuelle Element und seine Kinder angewendet. Inline -Stile haben immer noch eine höhere Priorität als umgesprägerte Stile. Daher ist es am besten, Inline -Stile zu vermeiden. Hier ist eine Mischung aus mehreren Stilen zusammen, um deren Effizienzbereich zu vergleichen:
<div>
<style Scoped>
Div {Grenze: 1px Festes Grün; Randboden: 20px; min-hohe: 40px; }
.Democontain {Hintergrund: #f8f8f8; }
</style>
<div> </div>
<div>
<style Scoped>
div {Hintergrund: hellblau; Grenze: 1px fest blau; }
</style>
<div> </div>
</div>
<div> </div>
</div>
In Scoped -Stilen können Sie alle legalen CSS -Style -Tags wie Medienabfragen wie folgt verwenden:
<style Scoped>
@media nur Bildschirm und (max. Width: 1024px) {
Div {Hintergrund: #000; }
}
</style>
Diese aufstrebende Scoped -Eigenschaft ist sehr nützlich, insbesondere für diejenigen, die Vorlagen oder CMS -Benutzer erstellen, oder einige Entwickler, die die gesamte Stildatei nicht bedienen können. Es ist jedoch zu beachten, dass einige alte Browser diese Eigenschaft nicht unterstützen. In diesem Fall müssen Sie möglicherweise das Jquery-Plugin (https://github.com/thingsinjars/jquery-scoped-css- plugin) verwenden, um dieses Problem auszugleichen.