苗条-`＆：nth-​​child（）`不适用于{#each}创建的元素

Question

<script lang="ts">
    let buttons: Array<{ buttonName: string; className: string; id: number }>;

    buttons = [
        { buttonName: 'NEW GAME', className: 'home-start', id: 1 },
        { buttonName: 'SETTINGS', className: 'home-setup', id: 2 },
        { buttonName: 'HOW TO PLAY', className: 'home-help', id: 3 },
    ];
</script>

<style land="sass">
    .buttons
        :nth-child(n+2)
            background-color: red
</style>

<template>
    <div class="buttons">
        {#each buttons as button (button.id)}
            <Button
                className="{button.className} button"
                on:click={()=>{console.log(button.className)}}>
                {button.buttonName}
            </Button>
        {/each}
    </div>
</template>

nth-child()选择器不起作用，但是对那些硬编码的元素起作用。 我该如何解决？

这是我在这里的第一个问题，虽然我的英语还不够好，但是我仍然希望它有意义。感谢您的帮助！

Answer 1

您在#each中呈现的元素不属于此组件，因此样式将被丢弃。这是因为svelte无法知道将此样式应用于哪个元素。一切都是值得的，Button组件看起来像这样

<div></div>
<button></button>

您可以通过在选择器中添加:global来解决此问题：

.buttons > :global(:nth-child(n+2) {
   background-color: red
}

（这使用常规的CSS，但是您应该能够将其转换为sass）

Docs about :global