将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 标签

回答

相关问题