將CSS效果僅應用於div的前10 標籤

如何將CSS效果應用於div的前10個<a>標籤？將CSS效果僅應用於div的前10 標籤

這是我的做法，但我相信，必須有一個更好的解決方案：

a:nth-child(1), a:nth-child(2), a:nth-child(3), a:nth-child(4), 
a:nth-child(5), a:nth-child(6), a:nth-child(7), a:nth-child(8), 
a:nth-child(9), a:nth-child(10){ color:#4faacb; }

來源

2013-04-29 sanchitkhanna26

我很確定有一個範圍選項可用。我只是不確定目前有什麼樣的瀏覽器支持。 – 2013-04-29 13:31:18

爲什麼不使用JS循環將類應用於前10個鏈接，然後將該類用作選擇器？ – 11684 2013-04-29 13:33:30

a：nth-child（-n + 11）{color：＃4faacb} – 2013-04-29 13:34:11

我相信這個CSS應該做的伎倆

a:nth-child(-n+10) { color: #4faacb }

JSFiddle

希望這有助於

來源

2013-04-29 13:35:20

太棒了，它的工作原理..令人敬畏的 – sanchitkhanna26 2013-04-29 13:37:20

@RayZ將它標記爲已接受（在數字和箭頭旁邊打勾），以便其他人可以找到解決方案！ – Barney 2013-04-29 13:38:23

我一定會......稍等片刻 – sanchitkhanna26 2013-04-29 13:39:05

您可以使用nth-of-type式結合not：

div > a:not(:nth-of-type(1n+11)){ 
    color: red; 
}

Demo here。

來源

2013-04-29 13:36:28 Barney

如果'div'的每個孩子都保證是'a'，那麼'：nth-of-type（）'或'：nth-child（）'將會起作用。 – BoltClock 2013-04-29 14:50:57

@BoltClock是的。 – Barney 2013-04-29 16:27:04

將CSS效果僅應用於div的前10 標籤

回答

相關問題