Commentaire: La transformation HTML5 nous a apporté beaucoup de nouveaux attributs très utiles, tels que l'espace réservé, le téléchargement, le caché, etc. Chaque nouvel attribut nous apporte de nouvelles méthodes de contrôle et des effets de contrôle sur les éléments de la page
En particulier, il existe un nouvel attribut qui nous permet de contrôler les propriétés de plusieurs éléments, à savoir: la portée. L'attribut dans la balise de style nouvellement apparu sur la balise de style peut rendre le style CSS efficace uniquement sur les éléments locaux. Plus précisément, les éléments enfants de l'élément qui stocke ce style de style prennent effet. La seule différence par rapport au style habituel est qu'un nouvel attribut à portée est ajouté:
<Style Scoped>
/ * Styles va ici * /
</ style>
Les styles avec des attributs dans les lunettes ne sont appliqués qu'à l'élément actuel et à ses enfants. Les styles en ligne sont encore plus prioritaires que les styles dans les lunettes, il est donc préférable d'éviter d'utiliser des styles en ligne. Voici un mélange de plusieurs styles pour comparer leur gamme d'efficacité:
<div>
<Style Scoped>
Div {Border: 1px Green solide; marge-fond: 20px; Min-Height: 40px; }
.DemoContain {Background: # f8f8f8; }
</ style>
<div> </div>
<div>
<Style Scoped>
Div {Background: LightBlue; Border: 1px bleu massif; }
</ style>
<div> </div>
</div>
<div> </div>
</div>
Dans Scoped Styles, vous pouvez utiliser toutes les balises de style CSS légales, telles que les questions médiatiques, comme celle-ci:
<Style Scoped>
@media uniquement écran et (max-largeur: 1024px) {
div {Background: # 000; }
}
</ style>
Cette propriété émergente émergente est très utile, en particulier pour ceux qui créent des modèles, ou des utilisateurs de CMS, ou certains développeurs qui ne peuvent pas utiliser le fichier de style entier. Mais il convient de noter que certains anciens navigateurs ne soutiennent pas cette propriété. Dans ce cas, vous devrez peut-être utiliser le plugin jQuery (https://github.com/thingsinjars/jquery-loped-css-plugin) pour compenser ce problème.