批量处理<div></div>样式

Question

我想批量处理wrap内的样式，就是每个div中第一个span内的文字为红色，第二个span的元素为白色，请问这个该怎么解决呢？
css和less的相关方法都可以

            <div className="wrap">
                <div>
                    <span>11</span>
                    <span>11</span>
                </div>
                <div>
                    <span>11</span>
                    <span>11</span>
                </div>
                <div>
                    <span>11</span>
                    <span>11</span>
                </div>
                <div>
                    <span>11</span>
                    <span>11</span>
                </div>
                <div>
                    <span>11</span>
                    <span>11</span>
                </div>
            </div>

Answer 1

less:

.wrap {
  >div span{
    &:nth-of-type(1){
      color: red;
    }
    &:nth-of-type(2){
      color: #fff;
    }
  }
}

Answer 2

.wrap div span:nth-child(1) {
  color: #ff0000;
}
.wrap div span:nth-child(2) {
  color: #ffffff;
}

Answer 3

.wrap span:nth-child（1）{ 样式 }
.wrap span:nth-child（2）{ 样式 }