Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the Scoped attribute in HTML5". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to use the Scoped attribute in HTML5" can help you solve the problem.

The change in HTML5 has brought us a lot of very useful new attributes, such as placeholder, download, hidden, and so on. Each new attribute brings us a new method and effectiveness of control over page elements.

In particular, there is a new attribute that allows us to control the attributes of multiple elements: scoped. The new scoped attribute on the style tag allows the CSS style to take effect only on local elements. Specifically, the child elements of the element storing the style style take effect. The only difference from the usual style is the addition of a new scoped attribute:

Copy the code

The code is as follows:

/ * styles go here * /

Styles with the scoped attribute are applied only to the current element and its children. The Inline style still takes precedence over the scoped style, so it's best to avoid using the inline style. Here's how to mix several styles together to compare their range of efficiency:

Copy the code

The code is as follows:

Div {border: 1px solid green; margin-bottom: 20px; min-height: 40px;}

.democontain {background: # f8f8f8;}

Div {background: lightblue; border: 1px solid blue;}

Any legal CSS-style tag, such as a media query, can be used in the scoped style, like this:

Copy the code

The code is as follows:

@ media only screen and (max-width: 1024px) {

Div {background: # 000;}

}

This new scoped attribute is a very useful feature, especially for those who create templates, or CMS users, or some developers who cannot manipulate the entire style file. However, it should be noted that some older browsers do not support this property.

This is the end of the introduction to "how to use the Scoped attribute in HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.