Html 第n个类型选择具有特定类的前3个元素

如何使用class

。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>

xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx

---

div

s的数量会有所不同。

n个类型的

以类型标记（div，span，a…）为目标，不能以具有特定类的第n个元素为目标。您可以在上阅读有关此选择器的更多信息

如果元素的顺序与示例中的不同，则需要JS:

---

JS解决方案：

下面是一个快速的jQuery代码片段，它选择类为

.class-b

的前3个元素，并将

.selected

类添加到这些元素中。然后可以使用它设置目标图元的样式

jQuery：

---

这只能通过CSS来实现，但是，它依赖于元素作为兄弟元素组保留，否则它可能无法按预期工作

.class-a + .class-b

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

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

第二次，依此类推

---

我做了一个JSFIDLE演示：

类选择器不是第n个，所以..不可能。JQuery将是您的答案。看看这些元素的顺序是否不会改变您可以滥用同级选择器，但是您需要的元素越多，选择器就会越详细。@j08691:它们是其类型的第n个元素，即div。在这种情况下，由于它们都是div，因此在功能上等同于：nth-child（）. 类选择器只是将匹配限制为该特定类的元素，而不是直接影响：nth-of-type（）如何计算元素。唯一需要注意的是，它假定元素的顺序与给定的顺序完全一致。但是如果它对OP有效的话，那就是一个答案。我只是在发布这篇文章后阅读了你的评论。这是一个很好的观点，我会把它写在答案中。当他说订单确实改变时，他举了一个订单没有改变的例子，这让我有点困惑..是的。。。你不是唯一一个。不确定他是否只是误解了我的评论。不幸的是，这对我不起作用。我只需要使用一个选择器就可以做到这一点。Thx，但是jQuery不是option@user3661304由于元素的顺序和数量可能会改变，

nth-of-type（）

对您不起作用，我认为您不会找到CSS解决方案。您是如何生成布局的？在布局生成过程中，您不能为目标元素指定一个特定的类吗？不，我不生成布局，所以它必须灵活。但绝对没有办法做到这一点：-(

.class-a + .class-b

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