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. JSON Schema 校验实例

    JSON Schema 简介 JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. ...

  2. 字符截取:cut,格式化输出:printf,字符截取:awk,文件或命令输出编辑:sed

    cut 选项 文件名 -f 列号 提取第几列 -d 分隔符 指定分隔符把行分成多列 不能以空格为分隔符. [root@localhost ~]# cat testfile no. name sex s ...

  3. 'boost/iterator/iterator_adaptor.hpp' file not found之xcode生成时报错的解决方案

    xcode生成rn(0.49.3)项目的时候出现“'boost/iterator/iterator_adaptor.hpp' file not found之xcode”报错. 原因: /Users/x ...

  4. date 命令详解

    date - print or set the system date and time Display the current time in the given FORMAT, or set th ...

  5. css3特效样式库

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

  6. 关于模拟登陆微博(PC)

    微博模拟登陆 1.基类对象的方法建立一个类__init__初始化方法,接收username和password. class launcher(): def __init__(self, usernam ...

  7. JQ 为未来元素添加事件处理器—事件委托

    随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...

  8. Git详解之五:分布式Git

    为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git 来组织 ...

  9. java 类方法和实例方法 以及 类变量和实例变量

    类体中的方法分为实例方法和类方法两种,用static修饰的是类方法 类方法: 对于类中的类方法,在该类被加载到内存时,就分配了相应的入口地址.从而类方法不仅可以被类创建的任何对象调用执行,也可以直接通 ...

  10. python2中的__init__.py文件的作用

    python2中的__init__.py文件的作用: 1.python的每个模块的包中,都必须有一个__init__.py文件,有了这个文件,我们才能导入这个目录下的module. 2.__init_ ...