CSS引入方式及作用范围解析
2026-02-15 22:30:54
0浏览
收藏
CSS的引入方式（link、@import、内联style和嵌入式style）在本质、加载行为、性能影响和作用范围上存在根本性差异：link作为HTML标签支持并行加载且无解析阻塞，而@import是CSS规则，强制串行请求并阻塞后续样式解析，易引发FOUC和性能瓶颈；内联style虽权重最高但无法使用伪类/媒体查询且存在XSS风险，仅适用于关键样式或动态注入；嵌入式style标签的位置并不限制作用域，真正决定样式的仍是选择器匹配逻辑与层叠顺序——无论写在何处，CSS规则都全局生效。理解这些差异对优化渲染性能、避免样式闪烁、保障可维护性至关重要。
link 和 @import 语法层面就不是一回事
link 是 HTML 标签，写在 里；@import 是 CSS 规则，只能写在 CSS 文件顶部或
/* 编译后实际生成类似 */
.button[data-v-f3f3eg9] { color: blue; }
