样式类的第一次出现[重复]答案

【问题标题】：Style the First Occurence of a Class [duplicate]样式类的第一次出现[重复]
【发布时间】：2014-02-08 11:21:15
【问题描述】：

我有一堆 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 也可以。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

例如，如果您想将第一个 .meat 元素涂成红色，请执行以下操作：

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

Documentation about the + pattern :

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

解决方案 2： 将 :not 与 + 和 first-child 结合使用：

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

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

第一个孩子（因此也是其父类中的第一个）或
跟随另一个类不是dairy的元素

Demonstration

Documentation of :not

注意事项：

这些选择器在 IE8 上不可用（但现代网络并不多，Google 甚至停止在 GMail 中支持 IE9...）。
如果您想应用相同类型的规则但可能包含中间元素，您可以使用~ 而不是+

【讨论】：

加号在 css 中有什么作用？
@FranciscoCorrales 我添加了加号的文档。
投反对票的人能否解释他不喜欢什么？
@FranciscoCorrales 我找到了一个“单指令”解决方案:)
@dystroy 好的，感谢您的澄清 (+1)

【解决方案2】：

你可以试试这个：（jq解决方案）

$(".meat:eq(0),.dairy:eq(0)").css('color','red');

【讨论】：

downvotes explnation 会很棒。
“最好是纯 CSS”。这是一个 CSS 问题。我不明白为什么人们想用超重的 JS 库替换简单、快速的 CSS 选择器。
@bjb568 “但 jQuery 也可以。”
这不是你的问题。他是 OP，这就是他所要求的。
你赢了我不想争论。