带有类的第一个子实例的CSS选择器？

Question

是否有一个带有类的子项的第一个实例的CSS选择器？例如，请使用以下代码：

<div id="container">
    <div class="nothing">
    </div>
    <div class="child"> <!-- SELECT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
</div>

是否有一个css选择器来设置第一次出现div的类别为“child”？

Answer 1

您可以使用general sibling combinator .child .child设置~样式，并为后续.child { color: #ff0000; } .child ~ .child { color: inherit; }兄弟节目恢复样式：

<div id="container">
  <div class="nothing">nothing
  </div>
  <div class="child">SELECT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
  <div class="child">NOT THIS ONE
  </div>
</div>

{{1}}

Answer 2

您可以使用“：nth-​​child”css选择器。

DEMO：http://jsfiddle.net/2pyvz/

CSS：

.child:nth-child(2) { color:red; }