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. Laravel学习笔记(二)

    解决了类自动加载的问题,剩下的问题就是看文档了,laravel的官方文档虽然简单,但是却包含了很多基础知识,学习Laravel最好先看看官方文档,我感觉帮助很大,因为laravel框架的源码看起来并不 ...

  2. Layui常见问题

    为什么表单不显示?当你使用表单时,Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例. ...

  3. iOS MJRefresh上拉加载更多

    1.导入MJRefresh包 2.在类中引入:#import "MJRefresh.h" 3.添加footerView 添加加载更多的UI样式: MJRefreshAutoNorm ...

  4. SpringMVC随笔记录

    在web.xml里可以配置webapp的默认首页,格式如下: <welcome-file-list> <welcome-file>index.html</welcome- ...

  5. Docker(六):Docker网络配置进阶

    1.Docker集群网络配置之Weave Weave是Github上一个比较热门的Docker容器网络方案,具有非常良好的易用性且功能强大.仓库地址:https://github.com/weavew ...

  6. Effective Java 第三版——14.考虑实现Comparable接口

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  7. 解决CUICatalog: Invalid asset name supplied问题

    这个问题其实是老问题,产生原因就是因为在使用的时候 [UIImage imageNamed:]时,图片不存在或者传入的图片名为nil.

  8. Intellij idea破解办法

    最开始的时候intellij用得是社区版,专业版是要钱的.但是社区版的功能确实弱了很多:比如Diagrams功能就没有,比如社区版不支持web项目,想起个tomcat跑个web项目都没法搞.于是,重新 ...

  9. 大数据学习系列之八----- Hadoop、Spark、HBase、Hive搭建环境遇到的错误以及解决方法

    前言 在搭建大数据Hadoop相关的环境时候,遇到很多了很多错误.我是个喜欢做笔记的人,这些错误基本都记载,并且将解决办法也写上了.因此写成博客,希望能够帮助那些搭建大数据环境的人解决问题. 说明: ...

  10. redmine 安装(Centos 6.5 x64)

    参考:http://www.linuxidc.com/Linux/2015-03/115545.htm 平台搭建 1)基础环境 yum -y install libyaml-devel zlib-de ...