html - nth-of-type 选择具有特定类别的前 3 个元素

Question

如何选择类 .class-b 的前三或四个元素

<div class="wrapper">
  <div class="class-a">xxx</div>
  <div class="class-a">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-b">xxx</div>
  <div class="class-c">xxx</div>
  <div class="class-c">xxx</div>
  <div class="class-c">xxx</div>
</div>

div 的数量会有所不同。

Answer 1

nth-of-type 以类型标记(div、span、a...)为目标，它不能以具有特定类的 nth 元素为目标。您可以在 MDN 上阅读有关此选择器的更多信息.

如果您的元素并不总是与示例中的顺序相同，您将需要 JS:

---

JS 解决方案:

这是一个快速的 jQuery 片段，它选择了类 .class-b 的前 3 个元素，并向它们添加了 .selected 类。然后，您可以使用它来设置目标元素的样式。

DEMO

jQuery :

var child_num = 0;
$('.wrapper > .class-b').each(function(){
    if(child_num < 3){
        $(this).addClass('selected');
    }
    child_num++;
});

CSS:

.selected{
    background:gold;
}