带有类的第一个子实例的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

您可以使用通用兄弟组合器.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>

Answer 2

您可以使用“:nth-child”CSS 选择器。

演示： http: //jsfiddle.net/2pyvz/

CSS：

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