详解CSS3中:nth-child的用法

CSS3中:nth-child的实际用途:不适用低版本的IE浏览器!

(1):nth-child(n + 4)选取大于等于4的标签,其中"n"为整数,下同

.demo01 li:nth-child(n+4){background:#090}


(2):nth-child(-n + 4)选取小于等于4的标签

.demo01 li:nth-child(-n+4){background:#090}



(3):nth-child(2n)选取偶数标签,其中的2n也可以写成even

.demo01 li:nth-child(2n){background:#090}



(4):nth-child(2n - 1)选取奇数标签,其中2n-1也可以写成odd

.demo01 li:nth-child(2n-1){background:#090}



(5):nth-child(3n + 1)自定义选取标签,3n+1表示“隔二取一”

.demo01 li:nth-child(3n+1){background:#090}



(6):last-child表示选取最后一个标签

.demo01 li:last-child{background:#090}



(7):nth-last-child(3)表示选取倒数第几个标签,3表示选取倒数第三个标签

.demo01 li:nth-last-child(3){background:#090}


(8):nth-last-child(odd)表示选取倒数的奇数标签,其中odd也可以写成2n-1;

.demo01 li:nth-last-child(odd){background: #090;}


(9):nth-last-child(even)表示选取倒数的奇数标签,其中odd也可以写成2n;

.demo01 li:nth-last-child(even){background: #090;}



  • 17
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值