如何解决苗条-`&: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()
选择器不起作用,但是对那些硬编码的元素起作用。
我该如何解决?
这是我在这里的第一个问题,虽然我的英语还不够好,但是我仍然希望它有意义。感谢您的帮助!
解决方法
您在#each
中呈现的元素不属于此组件,因此样式将被丢弃。这是因为svelte无法知道将此样式应用于哪个元素。一切都是值得的,Button
组件看起来像这样
<div></div>
<button></button>
您可以通过在选择器中添加:global
来解决此问题:
.buttons > :global(:nth-child(n+2) {
background-color: red
}
(这使用常规的CSS,但是您应该能够将其转换为sass)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。