如何在Angular中将TS模型变量传入CSS的nth-child选择器

你原来的写法行不通，因为SCSS是预编译的，编译阶段根本拿不到TS里通过@Input传入的动态变量${limit}。给你两种可行的解决办法：

方法一：使用CSS自定义属性（变量） #

利用Angular的样式绑定把TS变量传递给CSS变量，再在SCSS中引用这个变量：

1. 组件模板：给父元素绑定CSS变量

<div class="collapsed-list" [style.--limit]="limit">
  <!-- 这里是你的.expandable元素列表 -->
</div>

2. SCSS代码：通过var()引用CSS变量

.collapsed-list {
  max-height:15rem;
  overflow: hidden;

  .expandable:nth-child(var(--limit)) {
     color: red;
  }
}

3. TS代码：保持原有的@Input定义

@Input() public limit: number;

这种方法简洁，利用CSS原生特性，适合现代浏览器环境。

方法二：通过模板逻辑添加自定义类 #

如果需要兼容不支持CSS变量的老浏览器，可以直接在模板中判断元素索引，给目标元素添加高亮类：

1. 组件模板：结合*ngFor的index判断

<div class="collapsed-list">
  <div 
    *ngFor="let item of yourItemList; let i = index" 
    class="expandable" 
    [class.highlight-target]="i + 1 === limit"
  >
    {{ item.content }}
  </div>
</div>

2. SCSS代码：针对自定义类写样式

.collapsed-list {
  max-height:15rem;
  overflow: hidden;

  .expandable.highlight-target {
     color: red;
  }
}

3. TS代码：保持原有的@Input定义

@Input() public limit: number;

这种方法逻辑直观，兼容性更好，适合需要支持旧版浏览器的场景。

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