Question

我想从这个HTML代码中选择选择器中的第一个.choose div和另一个选择器中的第二个.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>

编辑，关于Mihai 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>

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

1 个答案: