塑造一个阶级的第一次出现

Question

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

Answer 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结合使用{/ 1}}：

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

此选择器定位类dairy的任何元素

• 第一个孩子（因此是父母中第一个孩子的孩子）或
• 关注其类不是dairy
的另一个元素

<强> Demonstration

Documentation of :not

注意：

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

Answer 2

您可以尝试:( jq解决方案）

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