Examples of using the Scoped attribute in HTML5_html5 tutorial tips-H5 Tutorial-php.cn

Examples of using the Scoped attribute in HTML5_html5 tutorial tips

WBOY

Release： 2016-05-16 15:47:55

Original

1349 people have browsed it

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.

Related labels：

html5

source：php.cn

Previous article：How to put pictures in HTML5 Canvas and save them as pictures_html5 tutorial tips Next article：HTML5 local storage localstorage, local database, sessionStorage simple usage examples_html5 tutorial skills

Statement of this Website

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