Question

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

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)

<强> fiddle

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

Answer 2

:nth-child (odd)不检查figcaption的否，并根据它计算奇数和偶数。它会根据您的父元素div

进行检查

nth-child DEMO

:nth-of-type(odd)检查figcaption的编号并根据它们计算奇数和偶数。

nth-of-type DEMO

Answer 3

在另一个div中包装每个数字集将按预期工作

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

CSS - 奇怪甚至不起作用

3 个答案: