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

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

在 Svelte 中，css 默认限定在组件范围内，因此在组件内定义的样式将不会影响其他任何地方。（组件内的样式化元素获得额外的 class，如 'svelte-1g7lik1'）

'users' div 除了用户组件——它不受样式影响——是空的，所以声明对任何东西都没有影响，因此是多余的

您可以通过将 css 语句包装在 :global()

中来解决问题

看到这个REPL

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

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

<style>
    .users > :global(*){
      border: 3px solid teal;
    }

    /*>> .users.svelte-16kesww>* {...} in bundle.css  */
      >> affects 'childcomponent-children'

  
    :global(.users > *) {  
        box-shadow: 2px 3px 0 0 pink;
    }

    /*>> .users > * {...} in bundle.css
      >> affects globally all children of elements with class 'users' */
</style>

Answer 2

多项：

我在你的代码中没有看到 users class，div 有一个 class container，我想你的意思是那个
Svelte 将所有样式的范围限定在当前组件，这意味着子元素不是目标。在您的情况下，您想要定位 div 的任何直接子项，但元素在 User 内，所以这不起作用

解决方案：使用 :global 告诉 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>

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

CSS selectors not working as expected when using each and components in svelte

css

css-selectors

svelte