全局样式
:global(...)
要在全局范围内为单个选择器应用样式，请使用 :global(...) 修饰符：
<style>
:global(body) {
/* 应用于 <body> */
margin: 0;
}
div :global(strong) {
/* 应用于属于本组件的 <div> 元素内的
所有 <strong> 元素，无论这些 <strong>
属于哪个组件 */
color: goldenrod;
}
p:global(.big.red) {
/* 应用于属于本组件的所有带有
`class="big red"` 的 <p> 元素，
即使该类是以编程方式添加的（比如通过库） */
}
</style>如果你想创建全局可访问的 @keyframes，你需要在关键帧名称前加上 -global-。
编译时 -global- 部分会被移除，然后在代码的其他地方可以直接使用 my-animation-name 来引用该关键帧。
<style>
@keyframes -global-my-animation-name {
/* 代码写在这里 */
}
</style>:global
要将样式全局应用于一组选择器，可以创建一个 :global {...} 块：
<style>
:global {
/* 应用于你应用中的每个 <div> */
div { ... }
/* 应用于你应用中的每个 <p> */
p { ... }
}
.a :global {
/* 应用于属于本组件中 .a 元素内的
任何组件中的所有 `.b .c .d` 元素 */
.b .c .d {...}
}
</style>上面的第二个示例也可以写成等效的
.a :global .b .c .d选择器，其中:global之后的所有内容都是未限定作用域的，不过更推荐使用嵌套形式。