下面我将详细讲解一下“HTML5中的Scoped属性使用实例”的完整攻略。
简介
scoped属性是HTML5中<style>标签新增的一个属性，表示该样式仅在当前标签内生效。它的使用可以很方便地实现针对特定元素的样式控制。
语法
scoped属性没有取值，只需要在<style>标签中添加该属性即可，例如：
<style scoped>
p { color: red }
</style>
注意事项
- 当一个元素被设置
scoped属性并有其子元素也设置了样式时，其子元素的样式对于该父元素是不起作用的。 - 在IE浏览器中不支持该属性。
示例说明
示例1：全局样式不影响局部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped属性示例1</title>
<style>
p { color: blue }
</style>
</head>
<body>
<div>
<style scoped>
p { color: red }
</style>
<p>这是红色字体。</p>
</div>
<p>这是蓝色字体，不受scoped影响。</p>
</body>
</html>
运行以上代码后，可以看到第一个<p>标签的字体是红色的，而第二个<p>标签的字体是蓝色的，因为全局样式不影响局部样式。
示例2：多个嵌套子元素设置scoped会产生覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped属性示例2</title>
<style scoped>
p { color: red }
</style>
<style scoped>
p { text-decoration: underline }
</style>
</head>
<body>
<div>
<p>这是有下划线的红色字体。</p>
<span>
<p>这是有下划线的红色字体，不受scoped的影响。</p>
</span>
</div>
<p>这是没有下划线的红色字体，也不受scoped的影响。</p>
</body>
</html>
运行以上代码后，可以看到第一个<p>标签的字体是红色、有下划线的，而第二个<p>标签的字体是红色、没有下划线的，因为多个嵌套子元素设置scoped会产生覆盖。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5中的Scoped属性使用实例 - Python技术站
微信扫一扫 
支付宝扫一扫 