在 svelte 中使用每个和组件时，CSS 选择器无法按预期工作

Question

当我的组件中可能存在内部元素时，为什么 svelte 会声明未使用的 CSS 选择器？

<div class="users">
    {#each [1,2,3,4,5] as id}
        <User name={id} />
    {/each}
</div>

<style>
    .users > * {
        margin-right: 5px;
    }
</style>

错误： Unused CSS selector ".users > *" (12:4)

回复： https://svelte.dev/repl/6c8b4a6a808c4aee80e51af58b4fcda4 ?version=3.44.0

用户是一个普通的div。不确定我是否应该使用另一种模式来实现这一目标。

Answer 1

多件事：

• users我在你的代码中没有看到一个类，它div有一个类container，我猜你的意思是这个
• Svelte 将所有样式的范围限定为当前组件，这意味着子元素不是目标。在您的情况下，您希望定位 的任何直接子级div，但元素位于内部User，所以这不起作用

解决方案：使用:globalwhich 告诉 Svelte 不要将选择器的范围限定为当前组件：

<script>
import User from './User.svelte'
</script>

<div class="users">
    {#each [1,2,3,4,5] as id}
        <User name={id} />
    {/each}
</div>

<style>
    /* you could also write :global(.users > *) but that
       would also target any "users" class somewhere else */
    .users > :global(*) {
        border: 3px solid teal;
    }
</style>