1.使用nth-child和nth-last-child时会产生的问题

在使用nth-child和nth-last-child时,其计算子元素是奇数个元素还是第偶数个元素时,是连同父元素中的所有子元素一起计算的。

当父元素是列表时,列表中只可能有列表项目一种子元素,所以不会出问题,但是当父元素是div时,div包含多种子元素,会出现问题。

2.使用nth-of-type和nth-last-of-type

<style type="text/css">

h2:nth-of-type(odd){

background:yellow;

}

h2:nth-of-type(even){

background:blue;

}

</style>

//只计算h2元素的,而不会包含和h2同级别的其他元素

CSS3中nth-of-type和nth-last-of-type的更多相关文章

  1. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  2. CSS和CSS3中的伪元素和伪类(总结)

    好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...

  3. img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

    img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...

  4. css3中transition和animation的回调处理

    弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...

  5. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  6. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  7. css3 中的transition和transform

    我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...

  8. CSS3中媒体查询,更换样式表

    <link rel="stylesheet" href="css/1.css" media="(min- width:600px)"& ...

  9. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  10. 媒体查询的应用以及在css3中的变革

    CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...

随机推荐

  1. 应用activeMQ消息中间件同步索引库

    mq是一个消息服务器: 安装包内置了tomcat,直接登录访问,登录:http://ip:8161/admin/    (相当于dubbo的moniter监控中心) admin admin传统串行化, ...

  2. 一些常用的vim编辑器快捷键:

    一些常用的vim编辑器快捷键: h」.「j」.「k」.「l」,分别控制光标左.下.上.右移一格. 按「ctrl」+「b」:屏幕往“后”移动一页. 按「ctrl」+「f」:屏幕往“前”移动一页. 按「c ...

  3. three.js实现3D模型展示

    由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能 ...

  4. 关于mysql使用命令行时出现Data too long for column的解决方案:

    方法一: 1,在mysql根目录下找到my.ini文件: 2:将其中sql-mode中的STRICT_TRANS_TABLES这个属性去掉: 3:重启mysql的服务(注意注销电脑不会重启mysql服 ...

  5. scala写算法-List、Stream、以及剑指Offer里部分题目基于scala解法

    Stream(immutable) Stream是惰性列表.实现细节涉及到lazy懒惰求值.传名参数等等技术(具体细节详见维基百科-求值策略). Stream和List是scala中严格求值和非严格求 ...

  6. 转战Hexo

    从之前的转战farbox,到现在又转战Hexo,真是不折腾不成魔.要说farbox有什么不好,可能唯一的不好就是它要求与Dropbox关联吧,这对于大部分国内用户来说是无法接受的,写文章之前一想到还要 ...

  7. bzoj 2337: [HNOI2011]XOR和路径

    Description Input Output Sample Input Sample Output HINT Source Day2 终于把这个史前遗留的坑给填了... 首先异或的话由位无关性,可 ...

  8. Java 多线程笔记

    资料来源于网络,仅供参考学习.   1.A Java program ends when all its threads finish (more specifically, when all its ...

  9. raspberrypi 3代B 配置摄像头

    raspberrypi 3代B 配置摄像头 硬件环境: 树莓派3B (element 14版) 树莓派3夜视摄像头800万像素(element 14版) 金士顿 64GB TF Class 10 UH ...

  10. 初识QT

    前言:这是写给纯小白看的文章,大神可以自行绕道. QT的优势(摘自360百科): Qt支持下列操作系统: Microsoft Windows 95/98, Microsoft Windows NT, ...