作用域样式

Svelte 组件可以包含一个 <style> 元素，其中包含属于该组件的 CSS。默认情况下，此 CSS 是作用域的，这意味着样式不会应用于问题组件外部页面上的任何元素。

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

<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>

特异性

由于将作用域类（例如 .svelte-123xyz）添加到选择器，因此每个作用域选择器都会获得 0-1-0 的特异性增加。这意味着（例如）在组件中定义的 p 选择器将优先于在全局样式表中定义的 p 选择器，即使全局样式表加载较晚。

在某些情况下，必须多次将作用域类添加到选择器，但在第一次出现后，它会使用 :where(.svelte-xyz123) 添加，以避免进一步提高特异性。

作用域关键帧

如果组件定义了 @keyframes，则名称将使用相同的哈希方法作用域到组件。组件中的任何 animation 规则也将进行类似的调整。

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

	/* these keyframes are only accessible inside this component */
	@keyframes bounce {
		/* ... *.
	}
</style>