Javascript 设置类的第一次出现的样式

我有一堆div：

<div>
    <div class="meat">Some stuff</div>
    <div class="meat">Some stuff</div>
    <div class="meat">Some stuff</div>
    <div class="meat">Some stuff</div>
    <div class="dairy">Some stuff</div>
    <div class="dairy">Some stuff</div>
    <div class="dairy">Some stuff</div>
</div>

一些东西
一些东西
一些东西
一些东西
一些东西
一些东西
一些东西

---

我需要设计每个类的第一个样式，并且不能控制html。。。最好是纯CSS，但jQuery也可以。

解决方案1:为非第一个元素定义特定样式：

.meat {
    // applies to all
}
.meat + .meat {
    // applies to those that aren't the first one
}

例如，如果要将第一个

.meat

元素涂成红色，请执行以下操作：

.meat {
  color: red;
}
.meat+.meat{
  color: inherit;
}

E+F匹配紧跟在同级元素E之前的任何F元素

解决方案2:使用

：不与
+
和
第一个孩子结合使用：

.dairy:first-child, :not(.dairy)+.dairy {
  color: red;
}

此选择器以类
dairy
的任何元素为目标，该元素为


第一个子级（以及父级中的第一个子级）或
跟随另一个元素，其类不是
dairy



注:


这些选择器在IE8上是不可用的（但现代网络上的选择器并不多，谷歌甚至停止在GMail中支持IE9…）
如果您想应用相同类型的规则，但可能需要使用中间元素，那么可以使用
~
而不是
+
您可以尝试以下方法：（jq解决方案）

$（“.meat:eq（0），.dairy:eq（0）”）.css（'color'，'red'）

如果能解释一下，那就太好了。“最好是纯CSS”。这是一个CSS问题。我不明白为什么人们想用超重的JS库替换简单、快速的CSS选择器。@bjb568“但jQuery也可以。”这不是你的问题。他是OP，这就是他问的。你赢了，我不想争论。加号在css中有什么作用？@FranciscoCorrales我添加了加号的文档。下一位选民能解释他不喜欢什么吗？@FranciscoCorrales我找到了“一条指令”解决方案：）@dystroy好的，谢谢澄清（+1）