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;
}

Answer 2

这只能用CSS完成，但是，它依赖于作为兄弟姐妹群体保留的元素，否则它可能无法按预期工作。

.class-a + .class-b

将仅选择第一个，然后使用

.class-a + .class-b + .class-b

为第二个，依此类推..

我做了一个jsFiddle演示：http://jsfiddle.net/KpLMR/

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

2 个答案: