style

<style>块中的CSS将只作用于该组件,成为私有样式，与外部隔离。 这通过向受影响的元素添加一个基于组件样式的class来实现（例如，svelte-123xyz）。

  1. <style>
  2.     p {
  3.         /* this will only affect <p> elements in this component */
  4.         color: burlywood;
  5.     }
  6. </style>

可以通过使用:global(...)修饰符将样式作用域全局。

  1. <style>
  2.     :global(body) {
  3.         /* this will apply to <body> */
  4.         margin: 0;
  5.     }
  7.     div :global(strong) {
  8.         /* this will apply to all <strong> elements, in any
  9.              component, that are inside <div> elements belonging
  10.              to this component */
  11.         color: goldenrod;
  12.     }
  13. </style>