Svelte中如何将style内:nth-child的序号参数替换为script定义的变量？

这个需求可以实现，但你写的直接在<style>块选择器里引用JS变量的写法无法直接生效，原因有两个：

1. Svelte的<style>块是编译阶段静态处理的，无法直接注入运行时的JS变量到选择器语法中
2. CSS本身也不支持在:nth-child()这类选择器的参数位置使用自定义属性，自定义属性仅支持在CSS属性值中使用

下面是两种可行的实现方案： #

方案1：模板绑定类（更推荐，性能更好，无全局污染） #

在渲染元素时直接通过下标匹配判断，给对应元素绑定高亮类：

<script>
// 要匹配的第n个元素，注意:nth-child是从1开始计数
let x = 5;
// 示例列表数据
let btnList = Array.from({length: 10}, (_, i) => i + 1);
</script>

{#each btnList as item, index}
  <button 
    class="button" 
    class:red-bg={index === x - 1}
  >
    按钮{item}
  </button>
{/each}

<style>
.button.red-bg {
  background-color: red;
}
</style>

方案2：动态插入全局样式（适合无法直接修改元素绑定逻辑的场景） #

通过svelte:head动态插入拼接了变量的样式标签：

<script>
let x = 5;
// x变化时自动更新样式内容
$: styleText = `
  .button:global(:nth-child(${x})) {
    background-color: red;
  }
`;
</script>

<svelte:head>
  {@html `<style>${styleText}</style>`}
</svelte:head>

注意该方案生成的是全局样式，需要注意选择器权重，避免污染其他组件的样式。

内容的提问来源于stack exchange，提问作者ITM007