全局样式
:global(...)
要全局将样式应用于单个选择器，请使用 :global(...) 修饰符：
¥To apply styles to a single selector globally, use the :global(...) modifier:
<style>
:global(body) {
/* applies to <body> */
margin: 0;
}
div :global(strong) {
/* applies to all <strong> elements, in any component,
that are inside <div> elements belonging
to this component */
color: goldenrod;
}
p:global(.big.red) {
/* applies to all <p> elements belonging to this component
with `class="big red"`, even if it is applied
programmatically (for example by a library) */
}
</style>如果你想使 @keyframes 可以全局访问，则需要在关键帧名称前面加上 -global-。
¥If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with -global-.
-global- 部分将在编译时被删除，然后在代码中的其他地方仅使用 my-animation-name 引用关键帧。
¥The -global- part will be removed when compiled, and the keyframe will then be referenced using just my-animation-name elsewhere in your code.
<style>
@keyframes -global-my-animation-name {
/* code goes here */
}
</style>:global
要全局将样式应用于一组选择器，请创建一个 :global {...} 块：
¥To apply styles to a group of selectors globally, create a :global {...} block:
<style>
:global {
/* applies to every <div> in your application */
div { ... }
/* applies to every <p> in your application */
p { ... }
}
.a :global {
/* applies to every `.b .c .d` element, in any component,
that is inside an `.a` element in this component */
.b .c .d {...}
}
</style>上面的第二个示例也可以写成等效的
.a :global .b .c .d选择器，其中:global之后的所有内容都是无范围的，尽管嵌套形式是首选。¥[!NOTE] The second example above could also be written as an equivalent
.a :global .b .c .dselector, where everything after the:globalis unscoped, though the nested form is preferred.