作用域样式

Svelte 组件可以包含一个包含属于该组件的 CSS 的 <style> 元素。此 CSS 默认具有作用域，这意味着样式不会应用于页面上相关组件之外的任何元素。

¥Svelte components can include a <style> element containing CSS that belongs to the component. This CSS is scoped by default, meaning that styles will not apply to any elements on the page outside the component in question.

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

¥This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. svelte-123xyz).

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

特异性(Specificity)

¥Specificity

由于将范围类（例如 .svelte-123xyz）添加到选择器中，每个范围选择器的 specificity 增加量为 0-1-0。这意味着（例如）组件中定义的 p 选择器将优先于全局样式表中定义的 p 选择器，即使全局样式表稍后加载也是如此。

¥Each scoped selector receives a specificity increase of 0-1-0, as a result of the scoping class (e.g. .svelte-123xyz) being added to the selector. This means that (for example) a p selector defined in a component will take precedence over a p selector defined in a global stylesheet, even if the global stylesheet is loaded later.

在某些情况下，必须多次将范围类添加到选择器，但在第一次出现后，它会与 :where(.svelte-xyz123) 一起添加，以免进一步增加特异性。

¥In some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with :where(.svelte-xyz123) in order to not increase specificity further.

作用域关键帧(Scoped keyframes)

¥Scoped keyframes

如果组件定义了 @keyframes，则使用相同的哈希方法将名称限定在组件范围内。任何 animation 文件也应重命名为 。

¥If a component defines @keyframes, the name is scoped to the component using the same hashing approach. Any animation rules in the component will be similarly adjusted:

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

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