link 标签引入的 CSS 默认全局生效，作用于整个 HTML 文档；其作用域不由引入位置决定，而取决于选择器特异性、层叠规则及 Shadow DOM 等隔离机制。
link 标签引入的 CSS 默认作用于整个 HTML 文档
使用 <link rel="stylesheet"> 引入外部 CSS 文件时，样式规则会全局生效，作用范围覆盖当前 HTML 文档中所有匹配的选择器元素。浏览器解析到该标签后，会将其中定义的样式表加入渲染树的样式层，不区分引入位置（<head> 或 <body> 后半段），但实际生效仍取决于 CSS 优先级和 DOM 加载顺序。
常见误区是认为把 <link> 放在某个 <div> 内就能限制其作用域——这完全无效。HTML 不支持“局部 link”，所有 <link> 都是文档级资源引用。
- 即使
<link>写在<body>底部，样式仍可能影响顶部已渲染元素（尤其配合!important或高优先级选择器） - 多个
<link>按加载顺序叠加，后加载的样式可覆盖先加载的同名规则（遵循层叠规则） - 动态插入
<link>（如 JS 创建并 append）也会触发全局样式注入，无天然隔离
@import 在 CSS 文件内会扩大作用范围而非缩小
@import 是 CSS 规则，只能写在 CSS 文件开头或 <style> 块顶部，它会让被导入的样式表内容“拼接”进当前样式表上下文，最终仍参与全局层叠计算。它不创建作用域边界，反而可能因加载延迟导致 FOUC（Flash of Unstyled Content）。
例如，在 main.css 中写 @import "theme.css";，theme.css 里的 button { color: red; } 依然能命中页面任意 <button>，和直接把那行写在 main.css 里效果一致。
立即学习“前端免费学习笔记（深入）”；
-
@import必须位于 CSS 文件最前面（注释之后、其他规则之前），否则被忽略 - 在
<style>块中使用@import会阻塞后续样式的解析，性能比<link>差 - 无法用
@import实现组件级样式封装；现代方案应转向 CSS Modules 或 Shadow DOM
真正限制样式作用范围需靠选择器或技术隔离
CSS 本身没有“文件作用域”概念，限制作用范围只能靠显式手段：一是用更具体的选择器缩小匹配范围，二是借助浏览器原生机制（如 Shadow DOM）或构建工具（如 CSS Modules）做编译期隔离。
比如给组件加唯一前缀：
/* component-a.css */
.cmp-a-button { background: blue; }
.cmp-a-button:hover { background: darkblue; }再在 HTML 中写 <button class="cmp-a-button">，就自然限定了影响范围——这不是引入方式决定的，而是选择器设计的结果。
- 避免通配符或低特异性选择器（如
div { margin: 0; }），它们极易污染全局 - Shadow DOM 中的
<style>只作用于其内部 DOM，是真正的作用域隔离，但需手动创建element.attachShadow({mode: 'open'}) - CSS-in-JS 方案（如 styled-components）通过运行时生成唯一类名实现隐式作用域，本质仍是选择器隔离
style 标签内联样式优先级高，但不改变作用范围
<style> 标签内的 CSS 规则也属于全局样式表，作用范围与 <link> 完全相同，区别只在优先级：同选择器下，<style> 内规则比外部文件中相同规则权重更高（因来源相同，仅位置靠后取胜）。它不会让样式“只作用于附近元素”。
一个典型错误是把 <style> 放在某个 <section> 里，以为能“局部化”。实际上只要选择器能匹配到其他地方的元素（如 p），样式就会生效。
-
<style>中的@media、@keyframes等规则仍是全局注册的 - 动态修改
<style>的textContent会实时重算全部匹配，开销可能比切换 class 更大 - 服务端渲染时，
<style>标签位置不影响作用域，但影响 CSS 关键渲染路径（建议仍放在<head>）
真正起作用的是选择器精度、CSS 特异性、DOM 结构嵌套关系，以及是否启用 Shadow DOM 这类隔离机制。引入方式只是加载渠道，不带作用域语义。
