css - 按类别全选，除了最后一个

Question

我有一系列，div我想选择除每个 div 中的最后一个之外的所有p带有类的标签，enable以便在 css 中应用特定样式。内容是动态生成的，并且可能因用户而异。

在下面的示例中，我想将此样式应用于第p一个 div 中的前两个，而在另一个中不应用此样式。我敢肯定这很容易，但我找不到任何解决方案来解决它。

<div>
    <p class="enable"></p>
    <p class="enable"></p>
    <p class="enable"></p>
    <p class="disable"></p>
</div>
<div>
    <p class="enable"></p>
    <p class="disable"></p>
    <p class="disable"></p>
    <p class="disable"></p>
</div>

谢谢你的帮助。

Answer 1

如果p元素限制为四个，div则可以使用nth-child伪选择器。

p.enable:nth-child(-n+2)
{
    background: #0f0;
}

p.disable
{
    background: #eee;
}

http://jsfiddle.net/Kyle_Sevenoaks/vw4wQ/

Answer 2

我有一个 Javascript 解决方案给你：

var divs = document.getElementsByTagName("div"), paras, i, j;

for(i = 0; i < divs.length; i++) {
    paras = divs[i].getElementsByTagName("p");
    for(j = 0; j < paras.length-1; j++) {
        if(paras[j+1].className === "disable")
            break;
        // apply your custom code here
        paras[j].style.background = "#FF0000";
    }
}

在这个 jsFiddle检查这个解决方案