以下是一个简单的示例，演示了如何使用 scoped 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scoped Styles</title>
</head>
<body>
<h2>Scoped Styles Example</h2>
<div>
<p>This is a paragraph with a specific style.</p>
<!-- Scoped styles for the paragraph -->
<style scoped>
p {
color: blue;
font-weight: bold;
}
</style>
</div>
<p>This is a paragraph without the specific style.</p>
</body>
</html>
在这个例子中，<style scoped> 包含了一些样式规则，这些规则只会影响包含该 <style> 标签的 <div> 元素内部的 <p> 元素。外部的 <p> 元素不受这些样式规则的影响。这有助于避免全局样式的冲突，使得样式更具模块性。需要注意的是，scoped 样式规则在一些浏览器中的支持可能有限，而且在 HTML5 规范中已经被废弃，因此使用时应当谨慎。在实际开发中，更常见的做法是使用类和 ID 来选择特定的元素。
转载请注明出处：http://www.zyzy.cn/article/detail/3954/HTML