link 标签引入的 CSS 默认全局生效，作用于整个 HTML 文档；其作用域不由引入位置决定，而取决于选择器特异性、层叠规则及 Shadow DOM 等隔离机制。
link 标签引入的 CSS 默认作用于整个 HTML 文档
使用 引入外部 CSS 文件时，样式规则会全局生效，作用范围覆盖当前 HTML 文档中所有匹配的选择器元素。浏览器解析到该标签后，会将其中定义的样式表加入渲染树的样式层，不区分引入位置（ 或 后半段），但实际生效仍取决于 CSS 优先级和 DOM 加载顺序。
常见误区是认为把 放在某个
内就能限制其作用域——这完全无效。HTML 不支持“局部 link”，所有
- 即使
写在底部，样式仍可能影响顶部已渲染元素（尤其配合!important或高优先级选择器） - 多个
按加载顺序叠加，后加载的样式可覆盖先加载的同名规则（遵循层叠规则） - 动态插入
（如 JS 创建并 append）也会触发全局样式注入，无天然隔离
@import 在 CSS 文件内会扩大作用范围而非缩小
@import 是 CSS 规则，只能写在 CSS 文件开头或 块顶部，它会让被导入的样式表内容“拼接”进当前样式表上下文，最终仍参与全局层叠计算。它不创建作用域边界，反而可能因加载延迟导致 FOUC（Flash of Unstyled Content）。
例如，在 main.css 中写 @import "theme.css";，theme.css 里的 button { color: red; } 依然能命中页面任意 ，和直接把那行写在 main.css 里效果一致。
立即学习“前端免费学习笔记（深入）”；
-
@import必须位于 CSS 文件最前面（注释之后、其他规则之前），否则被忽略 - 在
块中使用@import会阻塞后续样式的解析，性能比差 - 无法用
@import实现组件级样式封装；现代方案应转向 CSS Modules 或 Shadow DOM
真正限制样式作用范围需靠选择器或技术隔离
CSS 本身没有“文件作用域”概念，限制作用范围只能靠显式手段：一是用更具体的选择器缩小匹配范围，二是借助浏览器原生机制（如 Shadow DOM）或构建工具（如 CSS Modules）做编译期隔离。
