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

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;
}

有关+模式的文档:

E + F匹配任何直接在兄弟元素E之前的F元素.

方案2:使用:not结合+和first-child:

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

这个选择的目标类的任何元件dairy其是

• 第一个孩子(因而是父母中的第一个孩子)或
• 跟随另一个不是类的元素 dairy

示范

文件 :not

备注:

• 这些选择器在IE8上不可用(但现在很多网站都没有,Google甚至停止了对GMail中IE9的支持......).
• 如果你想应用相同类型的规则,但有可能的中间元素,你可以使用~而不是+