javascript - 通过分组选择每个第一个唯一元素

Question

我有一个具有交替类的元素列表。类别的出现是随机的，可以连续出现一次或多次。

我正在寻找一种方法来选择每个第一次出现的元素(用 - 标记)。最好，我想在 CSS 中执行此操作，但我也可以使用 JavaScript 解决方案。

<div class="type-1"></div>  -
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-2"></div>  -
<div class="type-1"></div>  -
<div class="type-1"></div>
<div class="type-2"></div>  -
<div class="type-2"></div>
<div class="type-1"></div>  -
...

Answer 1

就像这样:https://jsfiddle.net/aq8nw21f/

此代码使用 CSS 相邻兄弟选择器以及 :first-of-type 来获取列表中第一项的边缘情况。

#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 {
  color: red;
}

<div id="container">
    <span>If you used :first-child, the div below this would not highlight.</span>
    <div class="type-1">Yes</div>
    <div class="type-1">No</div>
    <div class="type-1">No</div>
    <div class="type-2">Yes</div>
    <div class="type-1">Yes</div>
    <div class="type-1">No</div>
    <div class="type-2">Yes</div>
    <div class="type-2">No</div>
    <div class="type-1">Yes</div>
</div>