IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    伪类选择符:nth-child()实现彩色标签云技巧

    phpvar发表于 2015-11-09 10:38:36
    love 0
    伪类选择符:nth-child()实现彩色标签云(显示效果,点下面的运行按钮),源码如下: [runcode]

    标签云

    1 2 3 4 5 06 07 08 09 10 011 012 013 014 015 016 017 018 019 020
    [/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, ..., 用代数中的代入法,可验证上述的颜色组合循环显示是否正确无误!


沪ICP备19023445号-2号
友情链接