为嵌套元素分隔CSS

Question

说我有以下内容 -

<div>
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
</div>

有没有办法使用CSS分别修改每个样式，而不必在每种情况下应用唯一的类？

例如，像div span { color: blue; }这样的东西，然后对后续的跨度应用不同的颜色，依此类推？

（...是的，我先尝试了很多Google搜索！）

Answer 1

尝试nth-of-type或nth-child：

 span:nth-of-type(1) {
  color:blue;
 }
 span:nth-of-type(2) {
   color:red;
 }

 span:nth-of-type(3) {
    color:green;
 }

here是代码示例