CSS first-of-type和last-of-type不起作用

Question

.bwrapa {
  background: gold;
}

.bwrapa:first-of-type {
  background: blue;
}

.bwrapa:last-of-type {
  background: blue;
}

<div class='parent'>
  <div class='abc'>lorem</div>
  <div class='abc'>lorem</div>
  <div class='bwrapa'>lorem</div>
  <div class='abc'>lorem</div>
  <div class='bwrapa'>lorem</div>
  <div class='bwrapa'>lorem</div>
  <div class='abc'>lorem</div>
</div>

为什么所有bwrapa类都具有background: gold？

其中的第一个和最后一个应该有background: blue-不是吗？

似乎是问题所在，我该如何解决？

Answer 1

.bwrapa:first-of-type将选择每个父元素的第一个子元素<div>（因为.bwrapa是div元素），而不是类bwrapa的第一个元素。有关更多信息，请参见documentation。