Html 如何使用CSS仅选择列表中的第一对img？

我有一组不同的img标签和类：

<div>
    <img class="w100" />
    <img class="w50" />    
    <img class="w50" />
    <img class="w100" />
    <img class="w50" />   
    <img class="w50" />
</div>

如何使用CSS仅选择每对中的第一个.w50？

您可以这样使用：

.w100 + .w50 {
  //styles here
}

例子

.w100+.w50{
边框：2个红色实心；
}

---

使用javascript css中还没有以前的选择器。

var img=document.querySelectorAll（“img”）；
对于（var i=0；i

记住我对这个问题的评论，我认为可以根据问题中给出的少量信息（即“pairs”一词）对标记做出一个假设：容器

div

中的某个位置有成对的

img

元素，可由以下选择器表示：

.w50 + .w50

您只想选择这些对中的第一对，而不考虑可能作为兄弟出现的任何其他元素（注意不要假设将出现哪种兄弟）

您不能仅使用一个选择器来执行此操作，因为如另一个答案中所述，但您可以使用的变体。也就是说，设置所有

.w50

元素的样式，然后在第一对元素之后覆盖它。您首先使用

.w50+.w50

选择该对元素，然后使用附加的<代码>~.w50：

.w50{
边框：2倍纯红；
}
.w50+.w50~.w50{
边界：0；
}

如果除了

.w100

和

.w50

之外还有其他类，这就不起作用了。@zakangelle这个答案是基于OP发布的实际标记，这只是另一种思考如何选择该元素的方式，而不是考虑一对元素中的第一个…而是

w100

之后的第一个元素，谢谢，它是一个元素ressant way.但是.w100并不总是在.w50类之前。您的答案给我选择第二个w50类的解决方案：

.w50+.w50{}

@BrownBe也许有一个你的标记的真实例子……我认为

.w50+.w50

是完成你的标记的最好方法goal@DanielPinzon你说得对。我写了所有的可能性，而且都很有用。

.w50、.w50+.w50+.w50{padding:08px0}

为“奇”类和

.w50+.w50、.w50+.w50+.w50+.w50{padding:08px}

表示“偶数”类。那么你只想得到前两个w50，或者w100之后的w50？你能说一些类似于

img.w50:nth child（奇数）

的话，它会抓住每对中的第一个，并且

.w50

？我试过这个

.w50:nth child（奇数）{padding:0 8px 0}.w50:nth child（偶数）{padding:0 0 0 8px}但它需要所有div（奇数）和（偶数）参数。@我想得到前两个w50；）仅以问题中给出的示例为例，几乎没有足够的信息，任何答案都有可能对您的实际标记做出过多假设。根据对问题的评论和当前答案，这一点很清楚。您应该解释选择元素的条件，或者至少提供选择条件为回答者缩小范围，请提供更多关于元素可能如何构造的示例场景。