【演示】在HTML5里用Scoped属性限定CSS的作用范围

下面的演示中方框具有绿色的边线，这说明scoped样式已经生效。而且这个样式只对特点DIV内部有效。

代码

<div class="democontain">
	<style scoped="">
		div { border: 1px solid green; margin-bottom: 20px; min-height: 40px; }
		.democontain { background: #f8f8f8; }
	</style>
	<div></div>
	<div style="border-color: red;">
		<style scoped="">
			div { background: lightblue; border: 1px solid blue; }

			@media only screen and (max-width : 1024px) {
				div {
					background: #000;
				}
			}
		</style>
		<div></div>
	</div>
	<div></div>
</div>

效果显示