伪类选择符:nth-child()实现彩色标签云
(显示效果,点下面的运行按钮),源码如下:
[runcode]
[/runcode]
可以看到上述源码实现了一个由6种颜色组合循环显示的彩色标签云,主要是运用css3新增的伪类选择符:nth-child()实现的,这里该选择符使用的
乘法因子(n)的定义包含一技巧在里面:
6n+?中的6代表以几种颜色作为一个循环显示,我们用:nth-child()定义了
5种颜色,再加上默认的
1种颜色(#666)刚才就构成上述的一个颜色循环组合。
要注意的是:E:nth-child(n)中的n 是
从1开始计数的,表示匹配父元素的第n个子元素E,这个同jq中的:nth-child(n)也是从1开始计数是一样的,但jq里面的:eq(n)中的n是从0开始计数的,不要混淆;另外乘法因子(n)可以是0, 1, 2, 3, ..., 用代数中的代入法,可验证上述的颜色组合循环显示是否正确无误!