style标签天然具有页面级作用域，仅影响当前HTML文件，无需scoped等额外属性；其优先级与外部CSS相同，取决于选择器特异性和声明顺序。
style标签写在当前HTML文件里就只作用当前页面
只要把 <style></style> 标签写在当前 HTML 文件的 或 中（推荐 ），它的 CSS 规则就只影响这个 HTML 文件，不会污染其他页面。浏览器加载时只解析当前文档里的 <style></style>，不跨文件生效。
常见错误是误以为要加 scoped（那是 Vue 单文件组件的属性，原生 HTML 不支持）或者手动加 class 前缀——完全没必要。
- 不需要任何额外属性，
<style></style>天然就是页面级作用域 - 多个
<style></style>标签可以共存，按书写顺序层叠（后写的规则优先级更高） - 如果页面通过
<iframe></iframe>嵌入其他 HTML，子页面的样式仍相互隔离，父页<style></style>不会影响子页
避免意外全局污染：慎用 ID 和通用选择器
<style></style> 虽然作用范围限于当前页面，但选择器本身没限制。比如写 #header 或 button，只要当前页 DOM 里有匹配元素就会生效——但如果这个页面未来被复用为模板，或和其他页面共享部分 HTML 结构，就可能引发样式冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给关键样式加页面唯一前缀类名，例如
.page-home .btn-primary，而不是直接写.btn-primary - 避免无上下文的标签选择器（如
p { line-height: 1.6; }），除非你明确要重置整个页面的基础排版 - ID 选择器（
#main）虽唯一，但一旦 JS 动态插入同 ID 元素（比如弹窗、广告位），也可能被意外命中
和外部 CSS 文件同时存在时的优先级怎么算
当前页的 <style></style> 与引入的 <link rel="stylesheet"> 文件，在 CSS 优先级计算中地位相同，都属于“外部样式表”层级（注意：<style></style> 在规范中不算“内联样式”， 属性才是）。最终谁生效，取决于：
- 选择器特异性（specificity）：
.page-home .card h2比h2优先级高 - 声明顺序：同特异性下，后出现的规则覆盖先出现的（无论来自
<style></style>还是外部 CSS） - 是否使用
!important：慎用，会破坏可维护性
所以如果你在 <style></style> 里写了一条规则想强制覆盖外部库（比如 Ant Design 的按钮样式），更稳妥的方式是提高特异性，而不是依赖书写位置：
<style>
.page-home .ant-btn-primary {
background-color: #1890ff !important;
}
</style>
动态插入 style 标签也能实现运行时页面级样式
需要 JS 控制样式开关（比如主题切换、A/B 测试）时，可以创建 <style></style> 标签并 append 到 document.head，它同样只作用于当前页面：
const style = document.createElement('style');
style.textContent = `
.theme-dark body { background: #1e1e1e; color: #fff; }
`;
document.head.appendChild(style);
注意点：
- 不要反复 append 同一样式标签，容易内存泄漏；替换时先
remove()旧的 - 服务端渲染（SSR）场景下，若首屏样式需立即生效，仍建议把初始样式写死在 HTML 的
<style></style>中，而非等 JS 执行 - 该方式无法被 CSS 预处理器（如 Sass）直接处理，维护成本略高
<style></style>，遇上泛用类名或全局标签重置，照样会悄悄影响不该动的地方。 
