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. iOS 上线因iPv6被拒,查询服务器是否支持iPv6,mac设置iPv6网络,手机测试iPv6

    一. iOS----如何检查域名是否支持ipv6 iOS----------如何检查域名是否支持ipv6 1.检查你所用到的库,像af 3.0以上什么的(不用改),其他的库自己去搜下是否支持ipv6吧 ...

  2. Safari不能连接到服务器

    系统偏好设置-网络-高级-代理,把"网页代理"和"安全网页代理"两个复选项去掉,最下面"使用被动FTP模式"复选项保留,即可解决!

  3. linux权限设置(开放某个文件夹给指定用户)

    问题背景: 今天想把自己的数据集开放给同事a,只允许其读,不允许写. 操作: step1: 查看该文件夹属于哪一个用户,哪一个组 ls 文件夹 -lstep2: usermod -a -G 指定文件夹 ...

  4. SSL/TLS通信

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/31 复习基本概念 对称密码:加密和解密使用同一密匙. 公钥密码: ...

  5. jsDOM编程-小球在盒子里来回撞击

    首先写一个小页面:页面需要一个div 这个div就是盒子,然后在div里在包含一个子div 这个子div就包含一张小球的图片 代码: <!doctype html> <html> ...

  6. 开发过程遇到的bug

    1.transition和display的冲突: 解决方法:1)使用visibility:2)使用js的setTimeout使动画延迟:3)可以改变高度: 2.form表单提交和js中的提交冲突 解决 ...

  7. WPF后台写ControlTemplate总结

    这段时间写ControlTemplate的时候发现绑定的时候有些问题需要总结: 实例ControlTemplate如下: <UserControl x:Class="ArcGISWpf ...

  8. whereis 命令详解

    whereis 作用:whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息.  参数:-b 定位可 ...

  9. Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  10. java构造器执行顺序一个有趣的简单实例

    一 Animal为父类,构造器中调用public(default.protected) say方法,Dog继承了Animal,并重载了say方法.新建Dog对象,查看运行结果,若将Animal中say ...