CSS - 选择第一个匹配的元素（不是第一个子元素或第一个类型）

Question

我想在选择器中选择第一个.choose div，并在此HTML代码的另一个选择器中选择第二个.choose div。
我不想:nth-child()或:nth-of-type()，但这样的事情:nth-of-class()或    :nth-of-selected()

<div id='parent'> 
    <div></div> 
    <div class='elements'></div> 
    <div></div> 
    <div class='elements'></div> 
    <div></div> 
</div> 

注：我知道浩做在JavaScript和jQuery，但我想在CSS的答案。

Answer 1

没有选择器将第一个孩子/兄弟姐妹与某个类相匹配。如果你仅仅需要这个特定的HTML结构，那么可以使用类似于#parent > .elements ~ .elements的东西来专门针对第二个。

#parent > .elements { /* for all .elements children */ 
 
    background: red; 
 
} 
 
#parent > .elements ~ .elements { /* only those that are siblings 
 
            of a previous .elements element */ 
 
    background: green; 
 
}

<div id='parent'> 
 
    <div>---</div> 
 
    <div class='elements'>Foo</div> 
 
    <div>---</div> 
 
    <div class='elements'>Bar</div> 
 
    <div>---</div> 
 
</div>

编辑，对于米哈伊T的暗示，如果有更多的.elements儿童它不仅会影响到第二个，这可以通过向第一选择固定的，这样说：

#parent > .elements, /* for all .elements children */ 
 
#parent > .elements ~ .elements ~ .elements { /* and all that have at least two .elements before them */ 
 
    background: red; 
 
} 
 
#parent > .elements ~ .elements { /* only those that are siblings 
 
            of a previous .elements element */ 
 
    background: green; 
 
}

<div id='parent'> 
 
    <div>---</div> 
 
    <div class='elements'>Foo</div> 
 
    <div>---</div> 
 
    <div class='elements'>Bar</div> 
 
    <div>---</div> 
 
    <div class='elements'>Foo</div> 
 
    <div>---</div> 
 
    <div class='elements'>Foo</div> 
 
    <div>---</div> 
 
    <div class='elements'>Foo</div> 
 
    <div>---</div> 
 
</div>