第一个类型选择器

Question

在这个例子中,我如何定位第一个.list-group-title？理想情况下,这适用于.list-group-title可能是第一个,第二个或第三个div的其他实例,但我总是想要定位第一个.list-group-title.

<div class="content-sidebar">
  <div class="list-group-divider">…</div>
  <div class="list-group-item list-group-title">…</div>
  <div class="list-group-divider">…</div>
  <div class="list-group-item list-group-title">…</div>
  <div id="ember1956" class="ember-view">…</div>
  <div class="list-group-item list-group-title">…</div>
</div>

我试过了:

.list-group-title:first-of-type 

这不起作用,我试过:

.list-group-title:nth-child(2)

但如果它不是另一个例子中的第二个div,这将无法解决它.

有没有办法实现这个？

Answer 1

CSS不包含一种first-of-class选择器.然而,你可以做的是做相反的事情:除了第一次出现之外的所有目标,从而有效地为第一次出现反向造型.

.list-group-title {
  background: red;
}

.list-group-title ~ .list-group-title {
  background: blue;
}

<div class="content-sidebar">
  <div class="list-group-divider">…</div>
  <div class="list-group-item list-group-title">…</div>
  <div class="list-group-divider">…</div>
  <div class="list-group-item list-group-title">…</div>
  <div id="ember1956" class="ember-view">…</div>
  <div class="list-group-item list-group-title">…</div>
</div>