如何为ng-repeat生成的除首个元素外的所有元素应用CSS类？

嗨，你的问题核心是CSS选择器写错了，之前的写法完全没命中目标元素～下面给你两个简单可行的解决方案：

方案一：利用AngularJS的$index在模板里控制类名 #

直接在ng-repeat的元素上用ng-class判断索引，只有当$index > 0（也就是非第一个元素）时才加上目标CSS类，代码如下：

<span ng-repeat="row in element.Parameters track by $index" ng-class="{'awesome-css-class': $index > 0}"> 
  {{row}} 
</span>

对应的CSS保持你的原定义就行：

.awesome-css-class {
  margin-left: 10px;
}

这种方式逻辑直观，直接在模板里控制样式的应用范围，维护起来很方便，而且不用担心DOM结构变化影响样式。

方案二：纯CSS选择器解决 #

如果不想修改模板，也可以用CSS选择器直接命中非第一个元素，有两种写法可选：

写法1：使用:not(:first-child)伪类 #

因为每个重复出来的span都带有awesome-css-class类，且是同级兄弟元素，所以可以直接写：

.awesome-css-class:not(:first-child) {
  margin-left: 10px;
}

写法2：使用相邻兄弟选择器+ #

这个选择器会选中所有紧跟在另一个.awesome-css-class元素之后的同类型元素，效果和上面一样：

.awesome-css-class + .awesome-css-class {
  margin-left: 10px;
}

⚠️ 注意：用相邻兄弟选择器时，要确保这些span之间没有其他元素插入，否则会漏掉中间的元素。

为什么你之前的写法无效？ #

你写的.awesome-css-class ul:not(:first-child)是在找带有awesome-css-class类的元素内部的ul子元素中，非第一个的ul，但你的DOM结构里根本没有这样的ul，完全没命中目标，所以自然不会生效啦～

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