style标签天然具有页面级作用域，仅影响当前HTML文件，无需scoped等额外属性；其优先级与外部CSS相同，取决于选择器特异性和声明顺序。

style标签写在当前HTML文件里就只作用当前页面

只要把 标签写在当前 HTML 文件的 或 中（推荐 ），它的 CSS 规则就只影响这个 HTML 文件，不会污染其他页面。浏览器加载时只解析当前文档里的 ，不跨文件生效。

常见错误是误以为要加 scoped（那是 Vue 单文件组件的属性，原生 HTML 不支持）或者手动加 class 前缀——完全没必要。

• 不需要任何额外属性， 天然就是页面级作用域
• 多个 标签可以共存，按书写顺序层叠（后写的规则优先级更高）
• 如果页面通过 嵌入其他 HTML，子页面的样式仍相互隔离，父页 不会影响子页

避免意外全局污染：慎用 ID 和通用选择器

虽然作用范围限于当前页面，但选择器本身没限制。比如写 #header 或 button，只要当前页 DOM 里有匹配元素就会生效——但如果这个页面未来被复用为模板，或和其他页面共享部分 HTML 结构，就可能引发样式冲突。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 给关键样式加页面唯一前缀类名，例如 .page-home .btn-primary，而不是直接写 .btn-primary
• 避免无上下文的标签选择器（如 p { line-height: 1.6; }），除非你明确要重置整个页面的基础排版
• ID 选择器（#main）虽唯一，但一旦 JS 动态插入同 ID 元素（比如弹窗、广告位），也可能被意外命中

和外部 CSS 文件同时存在时的优先级怎么算

当前页的 与引入的 文件，在 CSS 优先级计算中地位相同，都属于“外部样式表”层级（注意： 在规范中不算“内联样式”， 属性才是）。最终谁生效，取决于：

• 选择器特异性（specificity）：.page-home .card h2 比 h2 优先级高
• 声明顺序：同特异性下，后出现的规则覆盖先出现的（无论来自 还是外部 CSS）
• 是否使用 !important：慎用，会破坏可维护性

所以如果你在 里写了一条规则想强制覆盖外部库（比如 Ant Design 的按钮样式），更稳妥的方式是提高特异性，而不是依赖书写位置：

动态插入 style 标签也能实现运行时页面级样式

需要 JS 控制样式开关（比如主题切换、A/B 测试）时，可以创建 标签并 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 的 中，而非等 JS 执行
• 该方式无法被 CSS 预处理器（如 Sass）直接处理，维护成本略高