17370845950

标签默认具有文档级作用域，其CSS规则仅作用于当前HTML文档内的元素，不会影响其他页面。

直接在页面的 中写 标签，CSS 就只作用于当前 HTML 文件，不会影响其他页面。

为什么 能做到局部生效

标签里的规则默认是文档级作用域，只对当前 HTML 文档的元素起效。它不像外部 CSS 文件（）可能被多个页面共用，也不像全局样式表那样容易污染其他页面。

正确写法示例

把样式代码放在 内，不要加 scoped（那是 Vue 的语法，原生 HTML 不支持）：

注意事项和小技巧

• 样式优先级和外部 CSS 一样，遵循层叠规则；若与外部样式冲突，可通过提高选择器特异性（比如加 body .btn）或加 !important（慎用）来控制
• 避免在 里写 ，虽然浏览器能解析，但不符合 HTML 规范，可能引发意外行为
• 如果页面结构复杂、样式较多，建议仍用外部 CSS + 命名空间（如加页面前缀：.home-page .btn），更易维护
• 动态生成的页面（如 PHP、JS 渲染）中，可服务端注入或 JS 拼接 ，但注意 XSS 风险，需转义内容

替代方案对比

除了 ，还有几种“仅限本页”的方式：

• 内联样式（style 属性）：最局部，但只适合单个元素、无法复用，写多了难维护
• 带页面类名的外链 CSS：给 加唯一 class（如 class="page-contact"），然后在外部 CSS 中用 .page-contact .btn { ... } 限定范围
• 现代方案（如 CSS Modules 或 scoped style in Vue/Svelte）：适合组件化项目，但需构建工具支持，不适用于纯静态 HTML