html - 具有类的第一个子实例的 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 选择器来设置第一次出现的带有“child”类的 div 的样式？

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; }