[CSS3]nth选择器

这东西同有用的,对于处理细节样式效率颇高。今天在给INLODZ主题添加新的小工具时用到了。所以记录一下,直接在网上搜关键字“css倒数第几个” 发现居然没有谈到这个东西。这个属于伪类选择器所以使用时前面要带冒号:

  1. :first-child 选择某个元素的第一个子元素;
  2. :last-child 选择某个元素的最后一个子元素;
  3. :nth-child() 选择某个元素的一个或多个特定的子元素;
  4. :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算,也就是倒数第几;
  5. :nth-of-type() 选择指定的元素;
  6. :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
  7. :first-of-type 选择一个上级元素下的第一个同类子元素;
  8. :last-of-type 选择一个上级元素的最后一个同类子元素;
  9. :only-child 选择的元素是它的父元素的唯一一个了元素;
  10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  11. :empty 选择的元素里面没有任何内容。

最常用的要属 first-childlast-child 了,表示父级元素下的第一个子元素、最后一个子元素 。
nth-child(n)更灵活 ,只不过IE6-8和FF3等浏览器不支持”:nth-child”选择器

:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择,n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数

还有一个nth-last-child(n) 这个看意思就知道了,与nth-child 第一个元素开始相反,它是从最后一个元素开始数,也就是倒数n个元素。
多余的就不记录了,网上都有。



微信扫描下方的二维码阅读本文

赞(0)