问题描述

类似dom结构如下:

<div class="el-step">
  <i class="is-success"></i>
</div>
<div class="el-step">
  <i class="is-success"></i>
</div>
<div class="el-step">
  <i class="no-success"></i>
</div>
...

这个变化结构类似于步骤条(就是elementUI的el-steps组件)。其中已经完成的项（包括当前），元素会被加上is-success的类名。我想用css选中is-success中的最后一个，设置文字颜色。

问题出现的环境背景及自己尝试过哪些方法

为了动态选中最后一个类名为is-success的元素，我试用的css如下：

.is-success:nth-last-of-type(1){
   color:cadetblue;
}

但是发现选中的是所有的类名为is-success的元素，而不是最后一个

你期待的结果是什么？实际看到的错误信息又是什么？

显然，这样用是不符合nth-child、nth-of-type系列伪类的定义的，因为候选的并不是同级的子元素(或者其它原因)。

后来虽然解决了这个问题，但是还是很好奇用纯css，如何有顺序的选中非同级元素？类似于，最后一个或者是第n个这种需求。