按类别全选，除了最后一个答案

【问题标题】：Select all by class except last按类别全选，除了最后一个
【发布时间】：2012-11-16 18:19:33
【问题描述】：

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

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

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

感谢您的帮助。

【问题讨论】：

CSS 中没有解决方案。
@Axanagor p.disable 和最后一个 p.enable 样式一样吗？

标签： css css-selectors

【解决方案1】：

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

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

p.disable
{
    background: #eee;
}

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

【讨论】：

第二个div中的第一个p标签不应该被突出显示，我认为根据要求。
那么你对 CSS 的要求太多了，不得不求助于某种混乱的 JavaScript。祝你好运。
这不是我的问题。我刚刚看到了所要求的内容和提供的内容。

【解决方案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";
    }
}

在this jsFiddle查看此解决方案

【讨论】：

这个问题没有标记为 jquery 或 javascript
@defau1t：我知道，但我看到那样晚了，不想浪费我的回答。
无论如何我认为仅靠css是不可能的。