<style>标签默认具有文档级作用域，其CSS规则仅作用于当前HTML文档内的元素，不会影响其他页面。
直接在页面的 <head> 中写 <style> 标签，CSS 就只作用于当前 HTML 文件，不会影响其他页面。
为什么 <style> 能做到局部生效
<style> 标签里的规则默认是文档级作用域，只对当前 HTML 文档的元素起效。它不像外部 CSS 文件（<link rel="stylesheet">）可能被多个页面共用，也不像全局样式表那样容易污染其他页面。
正确写法示例
把样式代码放在 <head> 内，不要加 scoped（那是 Vue 的语法，原生 HTML 不支持）：
<head>
<style>
.btn {
background: #007bff;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
.page-header {
font-size: 24px;
margin-bottom: 16px;
}
</style>
</head>
注意事项和小技巧
- 样式优先级和外部 CSS 一样，遵循层叠规则；若与外部样式冲突，可通过提高选择器特异性（比如加
body .btn）或加!important（慎用）来控制 - 避免在
<body>里写<style>，虽然浏览器能解析，但不符合 HTML 规范，可能引发意外行为 - 如果页面结构复杂、样式较多，建议仍用外部 CSS + 命名空间（如加页面前缀：
.home-page .btn），更易维护 - 动态生成的页面（如 PHP、JS 渲染）中，可服务端注入或 JS 拼接
<style>，但注意 XSS 风险，需转义内容
替代方案对比
除了 <style>，还有几种“仅限本页”的方式：
立即学习“前端免费学习笔记（深入）”；
-
内联样式（
style属性）：最局部，但只适合单个元素、无法复用，写多了难维护 -
带页面类名的外链 CSS：给
<body>加唯一 class（如class="page-contact"），然后在外部 CSS 中用.page-contact .btn { ... }限定范围 - 现代方案（如 CSS Modules 或 scoped style in Vue/Svelte）：适合组件化项目，但需构建工具支持，不适用于纯静态 HTML
