Question

我有一系列div，我想选择p个所有enable个标签，除了每个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>

感谢您的帮助。

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

在this jsFiddle

中查看此解决方案

除了最后一个，按类选择全部

2 个答案: