是否有可能在CSS中選擇其他三個組？

是否可以在CSS中選擇其他三個組？如果是這樣，怎麼樣？是否有可能在CSS中選擇其他三個組？

所以在下面的示例中，將樣式應用於4-6和10-12 li s。

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
    <li>12</li> 
</ul>

我知道[純] JavaScript和jQuery可以做到這一點，但我正在尋找一個純粹的CSS解決方案，如果它存在。

來源

2013-10-01 iambriansreed

[CSS第n個孩子忽略前3個元素的可能重複，將其他3個元素的風格化並重復。可能？]（http://stackoverflow.com/questions/18970189/css-nth-child-ignores-the-first-3-elements-stylize-the-other-3-and-repeats-pos） –

順便說一句，我發現這個測試儀事實後，但我認爲這是很重要的鏈接：http://css-tricks.com/examples/nth-child-tester/ – iambriansreed

你要找的第n個孩子：

ul li:nth-child(6n+4),ul li:nth-child(6n+5),ul li:nth-child(6n+6) { 
    background:red; 
}

http://jsfiddle.net/bhlaird/utEP4/1/

來源

2013-10-01 23:10:50

似曾相識：http://stackoverflow.com/questions/18970189/css- nth-child-ignores-the-3-elements-stylize-the-other-3-and-repeats-pos/:) – BYossarian

+1在發佈問題之前，我與第n個孩子一起擺弄。我想到一些聰明的SOER會得到它。實際上，我希望每隔7（對於日曆行），但其他3個會更容易複製 - http://jsfiddle.net/utEP4/8/。謝謝！ – iambriansreed

@Byossarian如果這個問題更好地問我會找到它。 – iambriansreed

你可以用單個選擇做到這一點，利用:not和:nth-child的組合。

ul > li:not(:nth-child(6n+1)):not(:nth-child(6n+2)):not(:nth-child(6n+3)) { 
    color:blue; 
}

jsFiddle here

本身使用選擇沒什麼用，不過，考慮到你不能風格的其他元素。

ul > li:not(:nth-child(6n+4)):not(:nth-child(6n+5)):not(:nth-child(6n+6)) { 
    color:red; 
}

使用兩者的組合可以讓您創建一切樣式，see the demo。

來源

2013-10-01 23:22:22

是否有可能在CSS中選擇其他三個組？

回答

相關問題