Svelte 默认样式局部化，.button 在组件内不生效于其他组件是因为编译时添加唯一属性（如 svelte-abc123）并重写选择器为 .button.svelte-abc123；全局样式应统一放 app.css 中导入，而非滥用 :global()。
直接说结论：Svelte 默认所有 <style> 内的样式都是局部的，想全局生效必须显式用 :global()；但滥用 :global() 会导致样式失控，真正该全局的样式应统一放在 app.css 中导入，而非塞进组件。
为什么 .button 在组件里写不生效到其他组件？
Svelte 编译时会为每个组件的 DOM 元素自动添加唯一属性（如 svelte-abc123），并重写 CSS 选择器，变成 .button.svelte-abc123。这意味着：
-
.button只匹配当前组件内带该哈希属性的元素，外部同名类完全不受影响 - 不是靠 Shadow DOM 实现的，所以不支持
::slotted或:host等原生封装语法 - 即使父组件写了
.button，子组件的<button class="button">也不会被匹配——除非子组件自己也定义了该样式，或父组件用了:global()
:global() 怎么写才不会失效？
:global() 不是“让整个规则变全局”，它只放行括号内的选择器部分，且不能嵌套。常见错误和对应写法：
- 错误：
:global(.a .b) { color: red; }→ 中间的.b仍被局部化 - 正确：
:global(.a .b) { color: red; }（整个选择器被放行，浏览器原生支持）或:global(.a) :global(.b) { color: red; } - 想影响子组件里的
<strong>？写成div :global(strong) { color: goldenrod; }，注意div还是局部的，只作用于本组件内的<div> - 想改
<body>？:global(body) { margin: 0; }可以，但多个组件都这么写，后加载的会覆盖先加载的
富文本内容（{@html}）里的样式怎么控制？
{@html} 插入的 HTML 不会被 Svelte 加上作用域属性，所以普通 .content h1 样式无效。可靠做法是：
立即学习“前端免费学习笔记（深入）”；
- 用容器包裹：
<div class="rich-content">{@html unsafeHtmlFromApi}</div> - 在
<style>中写：.rich-content :global(h1) { font-size: 2.4rem; } - 避免直接写
:global(.rich-content h1)——.rich-content是局部类，会被哈希化，而:global()不处理它 - 如果第三方组件透传
$$props.class却没绑定到根元素，:global()也找不到目标节点
全局样式到底该放哪？
别把 :global(body) 或重置样式硬塞进某个组件的 <style> 块。原因很实际：
- 加载时机不可控：组件未挂载时，样式可能被 Svelte 清理掉
- 热更新异常：改一个组件的
:global()，可能触发整页样式重刷 - 复用困难：其他组件想用同一套字体/变量，还得再复制一遍
- 正确姿势：新建
src/app.css，写全局规则，然后在main.js里import './app.css'
只有极少数情况适合用 :global()：比如临时覆盖某个第三方 UI 库的特定样式，且确保它出现在真正渲染该 UI 的组件中——否则编译后节点还没挂载，样式就白写了。
