CSS全局：nth-​​of-type选择器（：nth-​​of-class） [英] CSS global :nth-of-type selector (:nth-of-class)

问题描述

哪些CSS选择器可用于选择父元素中的所有奇数元素，但不一定是兄弟元素？

 < ; div id =parent> 
< div> 
< div class =element> A< / div> 
< / div> 
< div class =element> A< / div> 
< div class =element> A< / div> 
< div> 
< div class =element> A< / div> 
< / div> 
< div class =element> A< / div> 
< div> 
  

我想要的是选择每个元素 parent ，并对此列表中的奇数索引样式应用样式。

在jsFiddle上演示。

  .parent> .element：nth-​​of-type（2n）{
 background：#afa！important; 
} 
 .parent> div：第n类型（2n） .element {
 background：#afa！important; 
} 
  

在JSFiddle上查看

What CSS selector can be used to select all odd elements inside a parent, but which are not necessarily siblings?

<div id="parent">
    <div>
        <div class="element">A</div>            
    </div>
    <div class="element">A</div>   
    <div class="element">A</div>         
    <div>
        <div class="element">A</div>            
    </div>
    <div class="element">A</div>            
<div>

What I want is to select every element in parent and apply a style only for odd-indexed ones in this list.

Demo on jsFiddle.

​

解决方案

I couldn't get it down to single selector, but with two...

.parent > .element:nth-of-type(2n){
  background:#afa !important;
}
.parent > div:nth-of-type(2n) > .element {
  background:#afa !important;
}

View it on JSFiddle

这篇关于CSS全局：nth-​​of-type选择器（：nth-​​of-class）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！