Home > Article > Web Front-end > Examples of using the Scoped attribute in HTML5_html5 tutorial tips

Examples of using the Scoped attribute in HTML5_html5 tutorial tips

WBOYOriginal: 2016-05-16 15:47:551309browse

Specially, there is a new attribute that allows us to control the attributes of multiple elements, which is: scoped. The new scoped attribute that appears on the style tag can make the CSS style only take effect on local elements. Specifically, it takes effect on the sub-elements of the element that stores this style style. The only difference from the normal style is that a new scoped attribute is added. Attributes:

Copy code

The code is as follows:

Styles with the scoped attribute will only be applied to the current element and its child elements. Inline styles still have higher priority than scoped styles, so it is best to avoid using inline styles. Here is a mix of several styles to compare their efficiency range:

Copy code

The code is as follows:

This new scoped attribute is a very useful feature, especially for those who create templates, or CMS users, or some developers who cannot operate the entire style file. But it should be noted that some old browsers do not support this attribute. In this case, you may need to use the jQuery plug-in (https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin ) to remedy this problem.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to put pictures in HTML5 Canvas and save them as pictures_html5 tutorial tipsNext article：How to put pictures in HTML5 Canvas and save them as pictures_html5 tutorial tips

See more

Examples of using the Scoped attribute in HTML5_html5 tutorial tips

Related articles