我有一个包含交替类的元素列表。类的出现是随机的,可以连续出现一次或多次。
我正在寻找一种方法来选择元素的每个第一次出现(标有-
)。我希望在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> -
...
答案 0 :(得分:5)
就像这样:https://jsfiddle.net/aq8nw21f/
此代码使用CSS邻近的兄弟选择器,以及:first-of-type来获取列表中第一个项目的边缘情况。
#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 {
color: red;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
一个不太引人注目的JS解决方案,而不是TW80000的CSS解决方案:
var els = Array.from(document.querySelectorAll('div[class^="type-"]'));
console.log(els.filter(function(el, index) {
return index === 0 || !el.classList.contains(els[index - 1].classList.item(0));
}));
<div class="type-1">1</div>
<div class="type-1">2</div>
<div class="type-1">3</div>
<div class="type-2">4</div>
<div class="type-1">5</div>
<div class="type-1">6</div>
<div class="type-2">7</div>
<div class="type-2">8</div>
<div class="type-1">9</div>