Comment: The HTML5 transformation has brought us a lot of very useful new attributes, such as placeholder, download, hidden, etc. Each new attribute brings us new control methods and control effects on page elements
In particular, there is a new attribute that allows us to control the properties of multiple elements, namely: scoped. The newly appeared scoped attribute on the style tag can make the CSS style effective only on local elements. Specifically, the child elements of the element that stores this style style take effect. The only difference from the usual style is that a new scoped attribute is added:
<style scoped>
/* styles go here */
</style>
Styles with scoped attributes are applied only to the current element and its children. Inline styles are still higher priority than scoped styles, so it is best to avoid using inline styles. Here is a mix of several styles together to compare their efficiency range:
<div>
<style scoped>
div { border: 1px solid green; margin-bottom: 20px; min-height: 40px; }
.democontain { background: #f8f8f8; }
</style>
<div></div>
<div>
<style scoped>
div { background: lightblue; border: 1px solid blue; }
</style>
<div></div>
</div>
<div></div>
</div>
In scoped styles, you can use any legal CSS style tags, such as media queries, like this:
<style scoped>
@media only screen and (max-width : 1024px) {
div { background: #000; }
}
</style>
This emerging scoped property is very useful, 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 property. In this case, you may need to use the jQuery plugin (https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin) to make up for this problem.