通常，你需要影响子组件内部的样式。也许我们想让这些框变成红色、绿色和蓝色。

一种方法是使用 :global CSS 修饰符，它允许你无差别地定位其他组件内部的元素

<style>
	.boxes :global(.box:nth-child(1)) {
		background-color: red;
	}

	.boxes :global(.box:nth-child(2)) {
		background-color: green;
	}

	.boxes :global(.box:nth-child(3)) {
		background-color: blue;
	}
</style>

但是有很多理由 *不* 这样做。首先，它非常冗长。其次，它很脆弱——对 Box.svelte 的实现细节的任何更改都可能破坏选择器。

最重要的是，它是不礼貌的。组件应该能够自行决定哪些样式可以从“外部”控制，就像它们决定哪些变量作为属性公开一样。:global 应该用作逃生舱——最后的手段。

在 Box.svelte 内部，更改 background-color，使其由 CSS 自定义属性 确定。

<style>
	.box {
		width: 5em;
		height: 5em;
		border-radius: 0.5em;
		margin: 0 0 1em 0;
		background-color: var(--color, #ddd);
	}
</style>

任何父元素（例如 <div class="boxes">）都可以设置 --color 的值，但我们也可以在各个组件上设置它

<div class="boxes">
	<Box --color="red" />
	<Box --color="green" />
	<Box --color="blue" />
</div>

这些值可以是动态的，就像任何其他属性一样。

此功能通过在需要时将每个组件包装在一个带有 display: contents 的元素中，并将自定义属性应用于它来实现。如果你检查元素，你会看到类似这样的标记

<svelte-css-wrapper style="display: contents; --color: red;">
	<!-- contents -->
</svelte-css-wrapper>

由于 display: contents，这不会影响你的布局，但额外的元素 *可以* 影响像 .parent > .child 这样的选择器。