能，但<link>引入的CSS总是全局生效；真局部需作用域隔离，如加父级前缀、scoped、CSS Modules或Shadow DOM。
局部 CSS 文件能直接用 <link> 引入吗？
能，但效果不是“局部”——<link rel="stylesheet"> 总是全局生效。浏览器加载后，里面所有选择器都会参与整个页面的样式匹配，不管它写在哪个 <div> 里、是否只给某个组件用。
真想只影响某块区域，得靠作用域隔离
CSS 本身没原生“局部作用域”概念，必须靠人工约束或工具辅助。常见做法有三类：
- 手动加父级类名前缀（最轻量，适合小项目）：
.article-content h2 { font-size: 1.5em; }<br>.article-content p { line-height: 1.6; }所有规则都以.article-content开头，确保只作用于该容器内 - 用
scoped（Vue 单文件组件专属）：<style scoped><br>.header { color: blue; }<br></style>Vue 编译时自动为选择器和元素添加唯一属性，实现模拟局部作用域 - 用 CSS Modules（React/Vite/Webpack 常见）：把
button.module.css中的.primary编译成类似Button_primary__xyz123的唯一类名，再通过 JS 显式导入使用
<link> 引入的 CSS 怎么避免污染全局？
如果非要用独立 CSS 文件（比如第三方 UI 片段），又不想影响其他地方，关键在「选择器收敛」和「命名克制」：
- 文件开头加一个高特异性容器选择器，如
#user-profile-card .card-title，而不是直接写.card-title - 避免通配符、
body、h1等全局标签选择器 - 不依赖
!important覆盖别人，而是靠层级和 specificity 控制优先级 - 引入时注意顺序：
<link>放在主样式表之后，才能确保它的规则有机会被更具体的父选择器压制
Shadow DOM 是唯一真正局部的方式
只有 Shadow DOM 能做到样式完全隔离——外部 CSS 进不去，内部 CSS 出不来。但需要主动创建：
立即学习“前端免费学习笔记（深入）”；
const host = document.querySelector('#my-widget');<br>const shadow = host.attachShadow({ mode: 'closed' });<br>shadow.innerHTML = `<style>h3 { color: red; }</style><h3>Hello</h3>`;
这时 h3 样式不会泄露到主文档，主文档的 h3 样式也不会影响它。代价是 DOM 隔离、事件穿透需额外处理，不适合简单嵌入。
多数所谓“局部样式”其实是命名+结构约定出来的假局部，真隔离成本高。选哪种，取决于你控不控制 HTML 结构、用不用构建工具、以及要不要支持老浏览器。
