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

问题描述

<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()器不起作用，但它适用于那些硬编码的元素。我该如何解决这个问题？

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

标签： css-selectorssvelte

您在中渲染的元素#each不是该组件的一部分，因此样式将被丢弃。这是因为 svelte 无法知道将这种样式应用于哪个元素。Button不管怎样，你的组件看起来像这样是值得的

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

您可以通过添加:global到您的选择器来解决这个问题：

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

（这使用常规 css，但您应该能够将其翻译为 sass）

关于 :global 的文档

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

问题描述

解决方案

推荐阅读