Svelte - `&:nth-child()`不适用于{#each}创建的元素
Svelte是一种现代的JavaScript前端框架，它通过编译时的转换将组件转化为高效的JavaScript代码，从而在浏览器中运行。Svelte的主要特点是其轻量级和高性能，它通过减少运行时的开销来提供更快的加载速度和更小的包大小。
在Svelte中，&:nth-child()选择器是CSS中的一种伪类选择器，用于选择某个元素的第N个子元素。然而，当使用Svelte的{#each}指令创建元素列表时，&:nth-child()选择器并不适用于这些动态创建的元素。
这是因为Svelte的{#each}指令会根据数据源动态地创建和销毁元素，而不是简单地隐藏或显示它们。因此，这些动态创建的元素在DOM中的位置是不固定的，无法通过&:nth-child()选择器来准确地选择。
如果需要在Svelte中对动态创建的元素进行选择和样式设置，可以考虑使用其他选择器或者通过给元素添加类名来实现。例如，可以使用&:first-child选择器来选择第一个子元素，或者通过给元素添加类名来进行选择和样式设置。
总结起来，Svelte中的&:nth-child()选择器不适用于通过{#each}指令创建的元素，需要使用其他选择器或者通过类名来实现对这些元素的选择和样式设置。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
Svelte - `&:nth-child()`不适用于{#each}创建的元素
css-selectors、svelte
PLAY', className: 'home-help', id: 3 },</script>
.buttons background-color: red <div class="buttons">
{#each</
浏览 21提问于2020-08-29得票数 0
回答已采纳
1回答
Svelte中的反应性列表有问题
reactive-programming、svelte
我是Svelte的新手，我被困在了一个对用户输入没有反应的列表中。
代码：<script>
import Nested from '.
浏览 2提问于2021-02-13得票数 0
2回答
如何将样式应用于Svelte中的插槽元素？
svelte
我希望在一个模块中声明的样式应用于该模块的槽元素(这些元素被填充在另一个文件中)。下面是以下示例的：<List> <li><a>{{item}}</a></li> ul a {
color: re
浏览 4提问于2017-09-07得票数 26
回答已采纳
1回答
如何在Svelte中动态呈现组件？
svelte
我试图循环一个数组来呈现具有type值的组件。import Two from './Two.svelte'; {type: 'One'}, {t
浏览 2提问于2021-01-10得票数 3
回答已采纳
1回答
Svelte“未使用”CSS未编译
css、svelte、tailwind-css
我正在创建一个文本网格，根据第n个子元素(根据屏幕大小确定)，文本的边框会有轻微的变化。然而，svelte将这些称为未使用的css，即使它们已定义。这些错误的原因可能是什么？{#each workWithUs as item, i} class="border-r-[1px] border-b{item}</span>
浏览 19提问于2021-06-25得票数 0
1回答
500排的圆型倒车桌感觉很慢吗？
svelte
我创建了由500行组成的表，点击时倒转它感觉很慢，主观上类似于500 so左右。和.纯JS感觉比Svelte快得多<script> {/each} {/each}<sc
浏览 5提问于2021-06-11得票数 3
回答已采纳
2回答
Svelte中的过渡仅适用于进入或退出DOM的元素。由于Svelte不能在单个元素上拥有键，我找到的唯一解决方案是使用单个元素数组在DOM中触发一个新元素，这看起来并不理想：let messages = ['hello world'];
messages = [message];
浏览 12提问于2020-05-16得票数 2
回答已采纳
2回答
将CSS动画导入到svelte元素
javascript、css、css-animations、svelte、svelte-component
我希望将CSS动画应用于任何给定的输入字段，具体取决于输入到其中的值。我的.svelte文件如下所示： let letterPlaceHolder = new Array(50) async function submit()//Backend returns list of which letters are valid and invalid.</script>
{#each</e
浏览 9提问于2022-06-09得票数 1
1回答
为什么:nth-child()不在JavaScript中工作？
javascript、jquery
"coltest">test</div><button id="oddcolor">Click me</button>它似乎只适用于第一个奇数元素为什么它不适用于所有的奇数元素？
我试过使用querySelectorAll，但它也不起作用。我尝试创建一个父容器，然
浏览 1提问于2021-03-26得票数 0
回答已采纳
1回答
Svelte中的表不会在属性更改时更新
javascript、firebase、svelte
我在Svelte中有一个表，它使用一个属性"things“来存储要显示为数组的数据。当我在父类中创建表元素时，我传入了一个名为$submissionsArr的存储。Svelte链接到firebase实时数据库-无论何时添加、更改或删除元素，$submissionsArr都会自动更新(此位运行良好；在更新中，我将$submissionsArr分配回自身，以便SvelteTable.svelte类： <script>
浏览 13提问于2021-09-03得票数 0
1回答
如何在一行中显示与项目相匹配的项，如果所有项都不适合，则显示剩余项的数量
html、css、svelte
我刚刚开始学习Svelte。我想把电子邮件显示在一行中，然后用这样的数字显示其余的电子邮件：<script lang="ts"> width
浏览 10提问于2022-08-06得票数 1
回答已采纳
1回答
选择Svelte或JS中焦点表格单元格中的所有文本
javascript、html-table、svelte
这更像是一个JS和HTML问题，而不是svelte。
当元素获得焦点时，我希望选择字段中的所有文本。当元素是输入元素时，它可以很好地工作，但是它不适用于td。
浏览 3提问于2022-08-29得票数 1
回答已采纳
1回答
我们的后端用episerver在.net中构建视图，作为前端开发人员，我想为他们提供Svelte组件，然后他们使用道具添加数据。使用Vue 2.x，我们可以让他们在他们的..cshtml文件中这样使用它： <main class="page">
<div class="c-page-header<v-main-nav :links='@Html.Raw(Model.Navigation)' &
浏览 3提问于2022-03-06得票数 0
3回答
jquery中的第n个子选择器
jquery
background-color:#dddddd;.red color:Red; $('#testTable tr.red:nth-childgray'); });
我想选择表内有class=red的所有赔率
浏览 0提问于2010-03-09得票数 1
回答已采纳
1回答
如何动态添加和删除每个块中的Svelte组件？
javascript、each、svelte
对于每个对象，我希望呈现一个Svelte组件。 <SomeComponent object={obj} />这不太管用。如果您在整个数组中删除一个对象，那么实际上，从Svelte</
浏览 4提问于2022-04-11得票数 0
回答已采纳
4回答
使用jquery选择大于n的表列？
jquery
在jquery中有没有一种方法可以选择所有大于4的td列？我有一个包含16列的表，最初我只想显示前4列。我知道我可以使用：一次隐藏一个，但如果有一个更简单的jquery方法就更好了。
浏览 0提问于2010-11-18得票数 2
回答已采纳
2回答
组合: CSS中的not()选择器
css、css-selectors
我正在尝试选择table中的所有table元素，第三个和第四个除外。我成功地做到了这一点：我想组合这些选择器，因为我有更多的:nth-child条目。就像这样，但没有用：这确实适用于jQuery，但不适用于CSS。
浏览 0提问于2011-09-13得票数 32
回答已采纳
1回答
Svelte递归组件事件
svelte、svelte-component
因此，我目前有一个svelte树视图，首先从API中获取父组件的数据，然后从父元素的id中提取任何其他子元素。parent.svelte{#each project as project}{/each}expo
浏览 8提问于2022-09-07得票数 0
回答已采纳
1回答
我尝试动态地创建一个表，但我做不到
javascript、svelte
我试图用svelte动态地构建一个表，但是我被数据显示卡住了。我很好地显示了th，但是对于td，数据没有按正确的顺序排列。以下是数据(数据是动态的，th和td的数量可能不同)： columns: [ title: "ID",{ } }}
下面是
浏览 6提问于2022-09-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
