选择器:nth-child使用摘要

96
九彩拼盘
2015.02.16 14:52* 字数 180

:nth-child匹配下标满足条件的子元素。

常见的用法

现在有如下的HTML

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

来匹配下标满足如下条件的元素

  • 第1个 li:first-child
  • 第5个 li:nth-child(5)
  • 第1个到第5个 li:nth-child(-n+5)
  • 第6个到最后 li:nth-child(n+6)
  • 最后1个 li:last-child
  • 倒数第二个 li:nth-last-child(2)
  • 奇数个 li:nth-child(odd)li:nth-child(2n+1)
  • 偶数个 li:nth-child(even)li:nth-child(2n)

兼容性

IE9+,Firefox,Chrome。
让IE6+支持:nth-child方法是,可以用selectivizr

其他

🐋 Web 前端
Web note ad 1