全部按類除外

我有一系列的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>

感謝您的幫助。

來源

2012-11-16 Axanagor

有一個在CSS這個無解。 – BoltClock

@Axanagor將p.disable和最後一個p.enable具有相同的樣式？ – kunambi

如果p元素僅限於每div四個元素，則可以使用nth-child僞選擇器。

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

p.disable 
{ 
    background: #eee; 
}

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

來源

2012-11-16 10:14:37 Kyle

第二個div內的第一個p標籤不應該突出顯示，我認爲按照要求。 – defau1t

然後你問的太多的CSS，將不得不訴諸某種搞砸的JavaScript。祝你好運。 – Kyle

這不是我的問題。我剛剛看到了什麼被問及提供了什麼。 – defau1t

我要給你一個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

來源

2012-11-16 10:19:33 Amberlamps

這個問題是沒有標籤爲jquery或javascript – defau1t

@ defau1t：我知道，但我看到這樣的方式來遲了，不希望我的回答浪費。 – Amberlamps

反正我不認爲這是可能的在CSS單獨。 – defau1t

全部按類除外

回答

相關問題