用css(或者Scss)选择器选择出一组非同级元素时，如何选中其中的最后一个元素，dom结构如下。你能帮帮我吗？

Question

问题描述

类似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个这种需求。

Answer 1

可以试试通过设置class单独控制颜色啊，可以看看这个demo
https://codepen.io/mhy-web/pen/JjoENVN

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
<el-steps :space="200" :active="activeIndex" finish-status="success">
  <el-step :class="{'active': activeIndex==1}" title="已完成">active</el-step>
  <el-step :class="{'active': activeIndex==2}" title="进行中"></el-step>
  <el-step :class="{'active': activeIndex==3}" title="步骤 3"></el-step>
</el-steps>
</div>