作用域样式

Svelte 组件可以包含一个 <style> 元素，其中包含属于该组件的 CSS。这些 CSS 默认是有作用域的，这意味着样式不会影响到组件外部的页面元素上。

这是通过向受影响的元素添加一个基于组件样式哈希值的类来实现的（例如 svelte-123xyz）。

<style>
	p {
		/* 这只会影响本组件中的 <p> 元素 */
		color: burlywood;
	}
</style>

优先级

每个作用域选择器都会因为添加作用域类（例如 .svelte-123xyz）而获得 0-1-0 的优先级增加。这意味着（例如）在组件中定义的 p 选择器会优先于全局样式表中定义的 p 选择器，即使全局样式表是后加载的。

在某些情况下，作用域类必须多次添加到选择器中，但在第一次出现之后，它会以 :where(.svelte-xyz123) 的形式添加，以避免进一步增加优先级。

作用域关键帧

如果组件定义了 @keyframes，名称将会使用相同的哈希方法限定在组件作用域内。组件中的任何 animation 规则也会相应地进行调整：

<style>
	.bouncy {
		animation: bounce 10s;
	}

	/* 这些关键帧只能在这个组件内部访问 */
	@keyframes bounce {
		/* ... */
	}
</style>