:nth-child(2)选取第几个标签,“2可以是你想要的数字”

.demo01 li:nth-child(2){background:#090}

:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同

.demo01 li:nth-child(n+4){background:#090}

:nth-child(-n+4)选取小于等于4标签

.demo01 li:nth-child(-n+4){background:#090}

:nth-child(2n)选取偶数标签,2n也可以是even

.demo01 li:nth-child(2n){background:#090}

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

.demo01 li:nth-child(2n-1){background:#090}

:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”

.demo01 li:nth-child(3n+1){background:#090}

:last-child选取最后一个标签

.demo01 li:last-child{background:#090}

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

.demo01 li:nth-last-child(3){background:#090}

:nth-child的这些用法在实际中很用得着,不用单独给需要选取的标签加上ID或Class
 
 
 

[CSS3] :nth-child的用法的更多相关文章

  1. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  2. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  3. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  4. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  5. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

  6. css3中webkit-box的用法

    转自:http://www.frontopen.com/288.html 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局 ...

  7. css3中webkit-box的用法(平分父元素)

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box- ...

  8. css3 box-shadow 阴影的用法

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  9. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  10. CSS3——:nth-child选择器基本用法简述

    注:n 是从1开始的 :nth-child 是 CSS3 提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法 下面示例代码截图用的是同一个例子,p元素的父元素都是body   p ...

随机推荐

  1. 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序

    实现EXCEL导入功能:web网站,excel导入用OLEDB同样会报错:未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序 报错信息: Exception caught. ...

  2. java文档打包成压缩包并且下载

    需求,根据产品ID查询产品详情,产品详情会返回产品的一些文案,以及图片的url.需要做成,将文案信息记录在一个txt文档中,然后图片下载到文件夹,最后下载到本地,下载后自动删除刚才生成的文件夹以及文件 ...

  3. soapUI参数中文乱码问题解决方法&soap UI工具进行web接口测试

    soapUI参数中文乱码问题解决方法 可能方案1: 字体不支持中文,将字体修改即可: file-preferences-editor settings-select font 修改字体,改成能显示中文 ...

  4. MD5加密算法原理及其应用

    MD5是一个安全的散列算法,输入两个不同的明文不会得到相同的输出值,根据输出值,不能得到原始的明文,即其过程不可逆:所以要解密MD5没有现成的算法,只能用穷举法,把可能出现的明文,用MD5算法散列之后 ...

  5. 20172325《Java程序设计》第一周学习总结

    20172325<Java程序设计>第一周学习总结 教材学习内容总结 第一章 1.1软件质量 软件工程是一门关于高质量软件开发的技术和理论的学科. 高质量软件的特征 1.2 数据结构 软件 ...

  6. Java 设计模式系列(十五)观察者模式(Observer)

    Java 设计模式系列(十五)观察者模式(Observer) Java 设计模式系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Java ...

  7. hadoop 分布式集群安装

    这一套环境搭完,你有可能碰到无数个意想不到的情况. 用了1周的时间,解决各种linux菜鸟级的问题,终于搭建好了.. 沿途的风景,甚是历练. 环境介绍: 系统:win7 内存:16G(最低4G,不然跑 ...

  8. jQuery动画中stop()与 finish()区别

    stop():接受三个参数,(要停止的动画名称:是否清空队列中的动画:是否当前动画立即完成) stop()相当于stop(false,false)表示停止执行当前动画,后续动画接着进行 stop(tr ...

  9. Web前后端数据交换技术和规范发展史:Form、Ajax、Comet、Websocket

    第一阶段:Form web应用想要与服务器交互,必须提交一个表单(form).服务器接收并处理该表单,然后返回一个全新的页面. 缺点:前后两个页面需要更新的数据可能很少,这个过程可能传输了很多之前那个 ...

  10. swift - 动画学习

    // //  ViewController.swift //  MapAnimation // //  Created by su on 15/12/10. //  Copyright © 2015年 ...