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. Xamarin截取/删除emoji表情bug解决方案

    大家都知道,一个英文=1字节,一个汉字2字节,而一个emoji表情=4个字节,在有这三种混用的时候,比如app聊天界面,那么删除和截取便成了很头痛的事情. 问题描述 截取导致乱码,如下图: 解决方案 ...

  2. pc端常用导航

    应为经常要写网站,导航部分基本一样,没必要每次都写一遍,下次直接来复制: HTML: <nav> <div class="clearfix container"& ...

  3. php使用websocket示例详解

    一.php 中处理 websocket WebSocket 连接是由客户端主动发起的,所以一切要从客户端出发.第一步是要解析拿到客户端发过来的 Sec-WebSocket-Key 字符串. 复制代码代 ...

  4. C# 各种帮助类大全

    前言 此篇专门记录一些常见DB帮助类及其他帮助类,以便使用时不用重复造轮子. DBHelper帮助类 ①首当其冲的就是Sql Server帮助类,创建名为DbHelperSQL 的类 ,全部代码如下: ...

  5. Q:记学习枚举过程中的一个小问题

    在学习有关java枚举的时候,我们知道了所有的枚举类型均是继承自java.lang.Enum类的,且所有的枚举常量均是该枚举类型的一个对象,且对象名即为该枚举常量的名称.例子如下:源码: public ...

  6. 遍历文件 创建XML对象 方法 python解析XML文件 提取坐标计存入文件

    XML文件??? xml即可扩展标记语言,它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言. 里面的标签都是可以随心所欲的按照他的命名规则来定义的,文件名为roi.xm ...

  7. Qt创建停靠悬浮窗口

    1.Qt实现窗口停靠和悬浮使用类QDockWidget,它有两个重要方法用来设置停靠特性以及停靠区域, dw1->setFeatures(QDockWidget::DockWidgetMovab ...

  8. Python环境安装及编辑器配置(一)

    在2018年决定写一些关于Python的文章,其实写博客这件事在2016年就有了,但是因为个人的一些原因一直被耽搁.所以2018年的目标之一就是写多一点的博客,不管是是生活还是工作.好吧,废话不多说, ...

  9. 第八章:Python基础の面向对象(二)

    本課主題 面向对象的多态 面向对象的成员 成员修饰符 特殊成员 面向对象其他应用 异常处理 设计模式与单例模式 面向对象的多态 指定参数类型只是多态的一种表现 另外一种是允许自己类型和自己的子类型(典 ...

  10. SuperSocket入门(四)-命令行协议

         前面已经了解了supersocket的一些基本的属性及相关的方法,下面就进入重点的学习内容,通信协议.在没有看官方的文档之前,对于协议的理解首先想到的是TCP和UDP协议.TCP 和 UDP ...