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的更多相关文章

  1. 不可不看!CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. CSS和CSS3中的伪元素和伪类(总结)

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  4. css3中的盒子模型

    1.示例一 实现左右布局,左侧宽度200px,右侧自适配 代码如下: <!DOCTYPE html> <html lang="en"> <head&g ...

  5. img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

    img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...

  6. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  7. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  8. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  9. CSS3中的动画功能(一)

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  10. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...

随机推荐

  1. 怎样在Spark、Flink应用中使用Protobuf 3的包

    如果在在Spark.Flink应用中使用Protobuf 3的包,因为Spark默认使用的是2.5版本的包,提交任务时,可能会报如下异常: com.google.protobuf.CodedInput ...

  2. [100个改变摄影的伟大观念].(英)玛瑞恩.高清扫描版.pdf

    下载地址  :https://u253469.ctfile.com/fs/253469-229765365

  3. springboot 入门八-自定义配置信息(编码、拦截器、静态资源等)

    若想实际自定义相关配置,只需要继承WebMvcConfigurerAdapter.WebMvcConfigurerAdapter定义些空方法用来重写项目需要用到的WebMvcConfigure实现.具 ...

  4. iOS Label 自适应高度

    推荐第二个 测试一,只改变numberOfLines属性,label的高度不会自适应(会有text中的一部分内容称为......) NSString *str = @"jgreijgirje ...

  5. 如何在阿里云linux上部署java项目

      前2天把git练了下,敲了很多命令,也借助图形界面增强自己的理解,乘着余热把linux在熟悉下.然后想起以前婷主有让我帮忙搭建的阿里云服务器,所以就想自己试着在阿里云的linux上搭建自己的jav ...

  6. verilog抓外部低频输入信号的上升沿和下降沿

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7220107.html 作者:窗户 Q ...

  7. Linux第五节随笔 /file / vim / suid /sgid sbit

    三期第四讲1.查询文件类型与文件位置命令 file 作用:查看文件类型(linux下的文件类型不以后缀名区分) 语法举例: [root@web01 ~]# file passwd passwd: AS ...

  8. 连接虚拟机mysql无法访问,报错编号1130的解决方法

    新装一台虚拟机mysql的时候,往往会出现win无法连接的情况,报错信息1130,是因为没有权限的问题,解决方案如下: mysql -u root -p mysql>use mysql; mys ...

  9. css3特效样式库

    直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...

  10. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...