Svelte

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

Svelte - `&:nth-child()` 不适用于由 {#each} 创建的元素

Svelte - `&:nth-child()` doesn't work for elements which created by {#each}

css-selectors