欢迎光临朱凯的个人博客!
朱凯,a3.work

css3伪类选择器nth-child,first-child,last-child...

 发布时间: 2016-08-02 09:07      原创:  朱凯博客      评论: .       .人查看

前端开发中,我们可能会碰到这样的需求: 让列表中某一部分显示不同的样式, 第一个、最后一个、偶数个、前几个……等等,那么应该如何实现?

我们可以通过服务器ifelse来判断输出相应的内容,但是如果是静态页面呢? 这个时候,我们就需要通过CSS3中的伪类选择器来实现,首先说几个常用的 :first-child、:last-child:nth-child(n的使用

1、first-child

/*first-child表示选择列表中的第一个标签*/
li:first-child{background:#090}

2、last-child

/*last-child表示选择列表中的最后一个标签*/
li:last-child{background:#090}

3、nth-child(3)

/*表示选择列表中的第3个标签,代码如下*/
li:nth-child(3){background:#090}

4、nth-child(2n) 

这个表示选择列表中的偶数标签,即选择 第2、第4、第6...

5、nth-child(2n-1)

这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7...

6、nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后

7、nth-child(-n+3)

这个表示选择列表中的标签从0到3,即小于3的标签

8、nth-last-child(3)

这个表示选择列表中的倒数第3个标签

除此之外,还有:

:first-child        /*选择某个元素的第一个子元素*/
:last-child         /*选择某个元素的最后一个子元素*/
:nth-child()        /*选择某个元素一个或多个特定的子元素*/
:nth-last-child()   /*选择某个元素一个或多个特定的子元素,从最后一个子元素开始算*/
:nth-of-type()      /*选择指定的元素*/
:nth-last-of-type() /*选择指定的元素,从元素的最后一个开始计算*/
:first-of-type      /*选择一个上级元素下的第一个同类子元素*/
:last-of-type       /*选择一个上级元素的最后一个同类子元素*/
:only-child         /*选择的元素是它的父元素的唯一一个了元素*/
:only-of-type       /*选择一个元素是它的上级元素的唯一一个相同类型的子元素*/
:empty              /*选择的元素里面没有任何内容*/

转载请注明来源:   css3伪类选择器nth-child,first-child,last-child...  - 朱凯博客

分享是一种快乐,也是一种美德:
¥打开支付宝,扫码领红包¥

支付宝

微信