CSS - 奇怪甚至不起作用

Question

我想使用伪选择器奇数结束偶数.但是如果元素的序列被另一个元素划分,例如标题,则奇数和偶数的顺序被打破.我该如何继续初始订单？

JS FIDLLE

HTML

<div class="fig">
     <figcaption>t</figcaption>
    <figcaption></figcaption>
  <div>headline</div>
    <figcaption></figcaption>
    <figcaption></figcaption>    
    <figcaption></figcaption>
 </div>

CSS

.fig figcaption:nth-child(even) {
 background:green;
}

.fig figcaption:nth-child(odd) {
  background:blue;
}

Answer 1

简单地用

figcaption:nth-of-type(odd)
figcaption:nth-of-type(even)

小提琴

https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type