Maison > Article > interface Web > Exemples d'utilisation de l'attribut Scoped dans les astuces du didacticiel HTML5_html5

Exemples d'utilisation de l'attribut Scoped dans les astuces du didacticiel HTML5_html5

WBOYoriginal: 2016-05-16 15:47:551309parcourir

Spécialement, il existe un nouvel attribut qui nous permet de contrôler les attributs de plusieurs éléments, qui est : scoped. Le nouvel attribut scoped qui apparaît sur la balise style peut faire en sorte que le style CSS ne s'applique qu'aux éléments locaux. Plus précisément, il s'applique aux sous-éléments de l'élément qui stocke ce style. La seule différence par rapport au style normal est que. un nouvel attribut de portée est ajouté. Attributs :

Copier le code

Le code est le suivant :

Les styles avec l'attribut scoped ne seront appliqués qu'à l'élément actuel et à ses éléments enfants. Les styles en ligne ont toujours une priorité plus élevée que les styles étendus, il est donc préférable d'éviter d'utiliser les styles en ligne. Voici un mélange de plusieurs styles pour comparer leur plage d'efficacité :

Copier le codeLe code est le suivant :

Ce nouvel attribut de portée est une fonctionnalité très utile, en particulier pour ceux qui créent des modèles, ou les utilisateurs de CMS, ou certains développeurs qui ne peuvent pas exploiter l'intégralité du fichier de style. Mais il convient de noter que certains anciens navigateurs ne prennent pas en charge cet attribut. Dans ce cas, vous devrez peut-être utiliser le plug-in jQuery (https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.

) pour remédier à ce problème.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment mettre des images dans HTML5 Canvas et les enregistrer en tant que conseils du didacticiel pictures_html5Article suivant：Comment mettre des images dans HTML5 Canvas et les enregistrer en tant que conseils du didacticiel pictures_html5

Articles Liés

Voir plus