码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中first-child、last-child、nth-child、nth-last-child

时间:2016-09-03 12:24:45      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

1.单独指定第一个子元素、最后一个子元素的样式

<style type="text/css">

li:first-child{

  background:yellow;

}

li:last-child{

   background:blue;

}

</style>

 

2.对指定序号的子元素使用样式

<style type="text/css">

li:nty-child(2){

  background:yellow;

}//对第二个子元素设定背景色

li:nth-last-child(2){

  background:blue;

}//对倒数第二个子元素设定背景色

</style>

 

3.对所有第偶数个子元素或者第奇数个子元素使用样式

<style type="text/css">

li:nth-child(odd){

  background:yellow;

}

li:nth-child(even){

 background:blue

}

</style>

CSS3中first-child、last-child、nth-child、nth-last-child

标签:

原文地址:http://www.cnblogs.com/wyaocn/p/5836555.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!