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. 2.python数据类型

    1 Number(数字) 2   字符串类型(string)   字符串内置方法 # string.capitalize() 把字符串的第一个字符大写 # string.center(width) 返 ...

  2. Java中参数传递问题

    Java中参数传递可以分为值传递和引用传递,话不多说直接撸代码 1.传原始类型(int,String等)数据是值传递 package test_1; public class Test { publi ...

  3. JavaScript--AJAX页面传值

    1.首先 闲话不说 直接代码走起,都是我工作闲事的积累干货 //重要 js 运行 $(function (){ 代码 }); 2.ajax 传值 //第一种 输入框 <input type=&q ...

  4. 【java】反射简单示例

    package 反射; public class Test反射 { public static void main(String[] args) { System.out.println(Runtim ...

  5. [array] leetcode - 35. Search Insert Position - Easy

    leetcode - 35. Search Insert Position - Easy descrition Given a sorted array and a target value, ret ...

  6. ArcGIS 网络分析[8.6] 资料6 创建网络分析图层及进行路径分析

    基于上篇所介绍的内容,就说说如何利用访问到的网络数据集,在Map中添加网络数据集图层.创建网络分析图层中的路径图层,并执行路径分析示例.

  7. 一个APP页面一个接口

    目前所在的公司做的是健康产业方面的APP,这个产品包括了安卓和IOS还有web三方面,除了要写后台管理的系统外,还要写移动端的接口.第一次写移动端接口就犯了一个错误,以为和web一样是怎么方便怎么来, ...

  8. 与apk签名有关的那些概念与命令

    一.概念篇 1.消息摘要-Message Digest 消息摘要:在消息数据上,执行一个单向的hash函数,生成一个固定长度的hash值,这个Hash值就是消息摘要,也成为数字指纹. 消息摘要特点: ...

  9. 根据图片的路径(绝对路径/相对路径都可以),生成base64的

    根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  10. 部署github开源软件遇到的问题

    jdk1.8源版本不一样: 将语言级别改为8,所有的jdk都配置为1.8 2. 遇到一些解析错误 应该是tomcat的jdk版本和项目的jdk版本不一样