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}指令创建的元素，需要使用其他选择器或者通过类名来实现对这些元素的选择和样式设置。

腾讯云相关产品和产品介绍链接地址：

相关·内容

Svelte 3 快速开发指南(对比React与vue)

在新文件夹中创建一个新的 Svelte 项目。...用“each”创建列表在 React 中，我们已经习惯了创建元素列表的映射功能。在 Svelte 中有一个名为“each”的块，我们要用它来创建一个链接列表。...data as link} 11// do stuff // 12{/each} 注意“each”是如何生成变量 data 的，我将每个元素提取为 “link”。...，它可用于我的每个块。...我可以使用 hook，但我想告诉你同样的概念如何适用于 Svelte 和React。

12.1K3 0

前端新宠 Svelte 带来哪些新思想？赶紧学起来！

如果你是打算从0开始学习前端，那本文暂时还不适合你阅读。 Svelte 简介 Svelte 是一个构建 web 应用程序的工具。...我们大部分代码都是写在 .svelte 后缀的文件里。 .svelte 文件主要保安多个 HTML 元素、1个 script 元素和 1个 style 元素。这3类元素都是可选的。...在使用 Vite 创建的 Svelte 项目中，找到 src/app.css 文件，并把里面的内容清空掉。...Vue的方式是： {{元素}} Svelte的方式是： {#each 源数据 as 元素}...基础组件在 Svelte 中，创建组件只需要创建一个 .svelte 为后缀的文件即可。通过 import 引入子组件。

4.1K2 0

为什么用 Svelte 写一个小程序如此快速？我用10分钟就搞定了！

与此同时，他想要一个平易近人的东西，这样其他不太懂技术的同事就可以快速创建可视化。正是出于这些需求，Svelte诞生了。从新闻编辑室开始，Svelte很快在开源社区聚集了一小群追随者。...另一种选择是使用vite驱动的模板，或者使用SvelteKit，一个基于Svelte的框架，用于构建具有内置路由功能的成熟应用程序——但在本中，我们将尽可能保持它的简洁。...我们还用特殊的Svelte语法增强了HTML，以创建一个循环并打印每本书的标题。正如你所看到的，Svelte对于控制流块有不同的语法，不像Vue或Angular，它们以特殊属性的形式添加了这样的功能。...如果您希望在控制流块中包含多个顶级项目，那么也不必创建包装器元素。一本书的标题是用花括号包围变量输出的。通常，当您在模板中遇到花括号时，您就知道您输入的是与svelte相关的内容。...简而言之，关于svelte，以下是需要记住的要点: 它有一个全职的维护人员它有很好的工具特点稳定它的生态系统正在成长 SvelteKit可用于快速构建应用程序

2.6K1 0

开箱Svelte

toc Svelte基础模版语法 if 循环语法each 异步加载await 元素指令神奇的符号 $ Svelte 生命周期 Svelte dispatch, Context... {/if} 循环语法each {#each items as item, i} {i + 1}: {item.name} x {item.qty} {/each} 异步加载...-- promise was rejected --> Something went wrong: {error.message} {/await} 元素指令 Svelte中的元素指令可以让你很方便的操控元素...writable 可以使用writable来创建一个可写的store。...readable store = readable(value: any, (set: (value: any) => void) => () => void) 使用readable来创建可以外部不可写的

9933 0

Svelte使用心得：在个人项目中表现不错，但在大型企业项目中仍有待观察

如果需要在 Svelte 管理的元素进入和离开 DOM 时对其进行动画处理，那么作者“吐槽”的这些 API 就非常有用。看来作者之前的抱怨不成立了。...在 Web 客户端这边，我选的是 Svelte 和 SvelteKit，主要是为了评估这些工具适不适合在大型项目里使用。下面跟大家聊聊我自己对于 Svelte 的一点思考。...事件调度程序 API Svelte 提供一个内置 API 可用于创建、分派和在父元素上侦听 CustomEvent。在基于单向数据流概念构建的系统中，其实很难为 Web 事件建模。...响应式语句我发现 Svelte 的响应式语句有点让人摸不着头脑。 Svelte 的基本响应基于变量分配。...这是 Svelte 的核心部分，不可能彻底回避，而且我觉得由此引发错误的可能性很高、而且影响范围很大。 Await 块 Svelte 提供{#if ...} 和 {#each ...}

2232 0

Svelte框架：编译时优化的高性能前端框架

本文将深入解析Svelte的架构、核心概念以及代码优化策略。Svelte简介Svelte由Rich Harris于2016年创建，旨在解决传统前端框架在运行时性能上的瓶颈。...这个系统基于一种称为“Reactive Statements”的声明式语法，能够精确地追踪数据变化并更新相关的DOM元素。...$: vs @:在Svelte中，$:和@:都可以用来创建响应式声明。$:在编译时会转换为纯JavaScript，而@:保留了原始的Svelte语法，用于在运行时进行计算。...Custom Elements: Svelte组件可以作为自定义元素使用，与其他库和框架（如React、Angular）集成。...单页应用（SPA）Svelte同样适用于构建SPA，其高效的更新机制和响应式系统确保了流畅的用户体验。

751 0

在10分钟内概览Svelte 3的基础知识

sveltejs / template svelte-todo cd svelte-todo 现在，我们已经有了一个适用于小型应用的汇总结构模板，现在，我们可以开始动手了。...target svelte应用程序将绑定HTML元素。...如果你用过react或vue，则就像React中用来给ReactDOM进行渲染或者使用Vue中的el:'body' 来绑定该元素 props 有某些组件可以从它的父级接受一些数据或者是属性...应用，因此，让我们更加进一步：我们要做的第一件事就是进入 src目录中，创建一个新的文件夹components，并且在这里面创建Tode.svelte文件。...所以，在我们的components文件夹中创建一个TodoItem.svelte文件，并且执行以下步骤：导出一个变量，就像您在App.svelte中看到的todo那样用todo.done 添加一个div

1.7K3 0

这些前端新技术你很难再忽视了 —— Svelte

What 什么是 Svelte？答：Svelte 是一个构建 web 应用程序的工具。...Svelte 像 LOL 中的暗夜猎手·薇恩，虽然身板也很脆弱，但异常灵活，能有很大的秀的空间、门槛偏高，适合高手。...答：Svelte 的编译策略决定了它跟 Virtual DOM 绝缘。...create 顾名思义就是创建 HTML 片段，把模板中的各个用 HTML 元素用 Vanilla API 创建出来，然后 mount 就可以将这个片段添加到页面的 DOM 中。...`watch` 功能 // 语法很奇怪，但是是合法的 $: doubleX = x * 2; // 3：`each` 块 let characters = [ { name: 'Aroma White

1K3 0

Web 框架能解决什么问题？

React 是当今的主流框架，还有三个较新的竞争者，它们声称自己的工作方式与 React 不同。 React “React 使创建交互式用户界面变得不费力。...React 引擎会把渲染的结果与之前的结果相比较，并将差异应用于 DOM 本身。这种处理更改传播的方式，被称为虚拟 DOM。在 SolidJS 中，这是以其存储和内置元素更明确地完成的。...例如，Show 元素将跟踪内部的变化，而不是虚拟 DOM。在 Svelte 中，生成“active”代码。Svelte 知道哪些事件会导致变化，它会生成直接的代码，区分事件和 DOM 更改。...在 Lit 中，反应性是通过元素属性来实现的，基本上是依赖 HTML 自定义元素的内置反应性。...Svelte 使用 each 指令，该指令根据其更新器被转译： {#each contacts as contact} {contact.name} {/each} Lit 提供了一个

1.5K1 0

一文讲透前端新秀 svelte

button on:click={count.decrement}>-reset lwriteable 用于创建一个...lstore 实例方法 subscribe 用于 store 改动的订阅，实际使用常常被 $store 这种简写代替 lset 用于修改 store 的值 lupdate 用于更新 store 的值 4...图15 上下文结构 4.2.2 模板编译 4.2.2.1 视图的创建前端框架创建视图的方式有几种，比如虚拟 dom，字符串模板，过程式创建。 svelte 采用的是过程式创建。...子模板构建函数如果碰到 each 模板获取循环模板片段，生成块构建函数 create_each_block 根据循环内变量引用，生成循环实例上下文获取 get_each_block_context...生成 key获取函数 get_key 生成基于key更新列表的patch逻辑函数 update_keyed_each 图17 模板AST 子模板构建函数 svelte 会把 if 模板， each

3.9K2 0

CSS 预处理器中的循环

下面我们遍历 36 个 div 元素，使用 :nth-child 给每一项添加编号及背景色。...值得注意的是 CSS 也可以实现 nth-child– 编号，不需要预处理器。然而 CSS 并没有循环结构，它提供了一个 counter() 方法，根据 DOM 的数量递增，可以用于生成内容。...其中一个例外是生成带编号的选择器，可以是 nth-child （像我们上面做的一样），也可以是自动生成的类名（通常用在栅格系统中）。我们将创建一个简单的不带间距的响应式栅格系统。...我并不想遍历整个集合或者特定数量的迭代——我想在找到需要的元素时就停止循环。我通常在抽象的工具包中使用，而在日常编写样式表时并不需要。我使用 Sass 创建了一个帮助我储存及控制颜色的工具包。...我这样做是因为我可以使用一个单独的变量指定样式生成器，并且自动创建实时更新的调色盘。但是这是一把双刃剑，并不适合任何人。map 不允许我像使用变量一样给直接给键值对赋值。

4.3K6 0

干货 | 携程机票前端Svelte生产实践

这就是Svelte采用的办法。Svelte会在代码编译的时候将每一个状态的改变转换为对应DOM节点的操作，从而在组件状态变化的时候快速高效地对DOM节点进行更新。...首先项目的基础结构是基于svelte-webpack-starter创建的，集成了TypeScript、SCSS、Babel以及Webpack5。...组件中的样式代码只对当前组件有效。这意味着在组件中为标签编写的样式不会影响到其他组件中的元素。...Svelte使用 {#each items as item}{/each} 来实现列表循环渲染，这里的item可以通过解构赋值，拿到item里面的值。...，在Svelte中并不适用。

2.1K1 0

3d效果的图片轮播

但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。...当值为数字时，意味着该元素与我们眼睛之间的距离为该值。该属性定义在需要3d变换的元素的父元素上，声明该属性意味着定义了一个3d空间，值越小，3d效果越明显。...d值为设置的perspective属性，z值为元素所在Z轴距离屏幕的长度，上图为z值为正值，下图的z值为负值。 ...preserve-3d则将该元素的所有子元素放入3d空间中，执行3d变换。 ...综上来看，transform-style可以为子元素创建3d空间，perspective可以设置视距（透视视深），而且该值只对第一个子元素有效。

2.1K5 0

jQuery选择器大全(48个代码片段+21幅图演示)2

需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素

1.6K8 0

关于写作那些事之利用 js 统计各大博客阅读量

现在已经成功定位到指定元素,而我们要统计的是全部文章的阅读量,因此需要定位到全部元素....> div > ,这样就轻松定位到全部元素的浏览量了,是不是很简单?...,下面需要再将83浏览中的浏览去掉,仅仅保留数字83. $.each($("#articlesList div:nth-child(1) > em").text().trim().split(" "),...定位到具体元素: $("这里是复制的选择器") 定位到具体元素内容: $("这里是复制的选择器").text() 去除字符串首尾空格: $("这里是复制的选择器").text().trim() 将字符串按照空格分割成字符串数组...小结中规中矩的传统 table 布局,只需要顺序定位到具体的元素即可,需要注意的是,博客园文章页面采用了分页,如果需要统计全部文章的阅读量,需要将每页的阅读量手动累加计算.

4844 0

框架究竟解决了啥问题？我们可以脱离它们吗？

例如，Show 元素将跟踪内部发生的变化，而不是虚拟 DOM。在 Svelte 中，会生成“响应式”代码。...Svelte 使用 each 指令： {#each contacts as contact} {contact.name} {/each} Lit 提供了一个 repeat...在 ReactJS 和 SolidJS 中，我们创建了可以转换为命令式代码的声明式代码，在 DOM 中添加或删除这个标签。在 Svelte 中，会直接编译生成这样的代码。...我认为它们应该用于将类似样式的元素组合在一起，而不是作为一种改变组件样式的万能机制。表单的优点表单是内置在 Web 平台中的原生 API，大部分功能都是稳定的。...value="Clear completed" /> 这个 HTML 包括下面的内容: 我们有一个 main 表单，其中包含所有全局输入和按钮，还有一个用于创建新任务的新表单

7.9K3 0

前端Svelte框架初体验

如果大家对React、Vue 的设计思路比较了解的话就会知道，他们必须引入运行时 (runtime) 代码，用于虚拟dom、diff 算法。...不过，可以看到，Svelte正在快速的更新，最新版本解决的问题也不少。四、快速上手 4.1 创建项目和其他前端框架一样，创建一个Svelte项目是非常简单的，命令如下。..."scripts": { "dev": "PORT=4000 rollup -c -w", }, 4.2 less配置创建Svelte项目的时候，模板本身是不携带任何插件的，如果需要在 Svelte...如果要进行循环，一般使用的是for/each。不过，Svelte的循环语句实在让人难以接受。... 不过，作为一款年轻的前端框架，很少能够看到一些互联网公司将 Svelte 应用于生产，究其原因，无外乎以下几点

3.8K1 0

jquery 手风琴

- 元素的一半宽度（详情可以访问CSS 定位布局 - 绝对、固定定位设置居中悬浮div）。...这里可以看到标签2并没有移动，这里就需要将标签3前面的所有li一起移动才行，需要使用prevAll()和each()这个方法来处理。编写前面元素一起向左移动的方法 ? ?...可以看到打印出了前面两个标签的索引 0 和 1，然后使用each()遍历操作标签1和标签2的移动。下面来看看，如果点击标签5，会是什么样的效果，如下： ?...可以看到右边的left数值和左边的left数值。 ? ? ? 考虑使用nextAll()和each()来设置向右移动的方法 ? ? 点击标签2，标签3 和 4 则自动向右移动。...+ " index=" + $(this).index()); // 已知前面元素的index()索引，那么下面可以设置left的值了。

1.5K2 0

都快2020年，你还没听说过SvelteJS?

组件定义 HTML markup 首先让我们创建一个展示书本具体信息的卡片组件，在src文件夹底下新建一个BookCard.svelte文件，里面定义一下卡片组件的HTML markup： // src...style标签然后把该组件相关的样式写在这个标签内，注意这里的样式只会对组件内的元素有效，不会影响到其他组件的样式的。... 展示列表数据我们可以使用each语法块去展示books列表的数据： // src/App.svelte .......} description={book.description} /> {/each} 你也可以直接在each块定义的时候解构出被递归对象里面的内容...} /> {/each} ...

3.1K1 0

jQuery选择器大全(48个代码片段+21幅图演示)

举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 ...3) :nth-child(xn+y)，x>=0，y>=0。...=checkbox][checked]').each(function() { alert($(this).val()); }); $(':checked').each(function()

5K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云