svelte组件私有css默认局部作用域，只需标签不加global；需穿透时用:global()精准控制；全局样式应放src/app.css或+layout.svelte中引入。
组件私有CSS必须用 <style></style> 标签且不加 global
在 Svelte 中，<style></style> 块默认就是局部作用域的——它会自动被编译为带唯一 hash 的类名（比如 .header-abc123），只影响当前组件内的元素。只要不显式加 global 修饰符，就天然隔离。
常见错误是手动加前缀或用 CSS Modules 思维去“防污染”，其实完全没必要；更危险的是误写成：
<style global>
.btn { color: red; }
</style>
这会让样式全局生效，破坏封装性，且难以追踪来源。
正确写法只需：
<style>
.btn { color: red; }
&:hover { opacity: 0.8; }
</style>
-
&指向组件根元素，安全可靠 - 所有选择器自动 scoped，无需担心泄漏
- 支持嵌套、
:global(...)局部穿透（见下一条）
需要穿透局部作用域时用 :global() 而非 global 属性
当组件内要样式化子组件（尤其是第三方或无源码的组件）时，不能靠父组件的 <style global></style>——那会污染全局。应使用 :global() 函数包裹具体选择器，精准控制范围。
例如：想让当前组件内所有 <input> 元素统一禁用 outline：
<style>
:global(input:focus) {
outline: none;
}
</style>
-
:global(...)只解除括号内选择器的作用域限制，不影响外部 - 避免写
:global(.my-input:focus)这类宽泛规则，容易误伤 - 如果子组件也用了 scoped style，它的内部
<input>仍会被匹配到——这是预期行为
全局 CSS 应该放在 src/app.css 或 src/routes/+layout.svelte 中引入
SvelteKit 项目中，真正的全局样式（如重置、字体定义、工具类）不应塞进某个组件的 <style></style>，而应通过标准入口加载：
- 在
src/app.css中写基础样式，并确保src/app.html里有<link rel="stylesheet" href="/app.css"> - 或在
src/routes/+layout.svelte的<script></script>中动态 import：import '$lib/styles/global.css';（需搭配 Vite 的 CSS 处理） - 不要在
+page.svelte里 import 全局 CSS——会导致重复注入和 FOUC
注意：SvelteKit 默认不处理 .css 文件的 HMR（热更新），改完 app.css 需手动刷新；若用 PostCSS 或 Tailwind，务必确认插件已启用并配置了 includePaths。
第三方组件样式冲突？优先查其是否导出 css 属性或提供 class prop
像 svelte-headlessui、svelte-dnd-action 等库，往往不带默认样式，而是暴露 class 字符串或 css 对象供你接管。这时候强行用 :global() 覆盖反而难维护。
典型做法是：
- 看文档是否提供
class:xxx绑定（如<menu class:button="is-open"></menu>） - 检查组件是否导出
$$props.class，允许你传入自定义 class 名 - 用
$$props.style注入内联样式（适合简单覆盖） - 最后才考虑
:global()，且限定在组件作用域内（如.my-wrapper :global(.headlessui-menu-item)）
真正容易被忽略的是：Svelte 的样式隔离机制对 <slot></slot> 内容无效——子内容的样式由其自身组件决定，父组件无法用普通 <style></style> 控制，必须靠 :global() 或 props 协作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
