首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。

 
/*选择器写法示例*/
 
nth-child(n) //正数第n个子元素
 
nth-last-child(n) //倒数第n个子元素
 
nth-child(odd) //正数下来所有的第偶数个子元素
 
nth-last-child(even) //倒数上去的第奇数个子元素
 
        那么nth-of-type与nth-last-of-type呢?
 
        在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一 些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。
 
        这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话 说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子 元素是h2子元素的时候使用。”(demo的话h2,p相互交错,h2都在奇数位置。)
 
        nth-of-type与nth-last-of-type可以避免这类问题的发生。使用这两个选择器的时候,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了。
 
/*选择器写法示例*/
 
h2:nth-of-type(odd) //第偶数个h2子元素
 
h2:nth-of-type(even) //第奇数个h2子元素
 
新增结构伪类选择器列表:
 
E:root:匹配E所在文档的根元素
 
E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
 
E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
 
E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
 
E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
 
E:first-of-type:匹配父元素的第一个类型为E的子元素
 
E:last-child:匹配元素类型为E且是父元素的最后一个子元素
 
E:last-of-type:匹配父元素的最后一个类型为E的子元素
 
E:only-child:匹配元素类型为E且是父元素中唯一的子元素
 
E:only-of-type:匹配父元素中唯一子元素是E的子元素
 
E:empty:匹配不包含子节点(包括文本)的E元素

WEB前端使用的CSS3选择器的更多相关文章

  1. 【WEB前端】CSS常用选择器

    1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...

  2. 10款web前端基于html5/CSS3应用特效

    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式 对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换.这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦 ...

  3. 【Web前端】用CSS3实现弹幕

    初版 用css3来实现弹幕确实比较简单,只需要设置动画让弹幕从屏幕右侧移动到屏幕左侧即可,一开始是这样实现的 .danmu { position: fixed; left: %; animation: ...

  4. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  5. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  6. 1+x证书Web前端开发CSS3详细教程

    web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...

  7. 100本最棒的web前端图书推荐

    前端技术,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书边码代码,这个是学习编程必须的过程,因为你看一百遍,还不如自己写一遍,写一遍,第一可以加印象,第二便于更好的理解. 熟 ...

  8. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  9. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

随机推荐

  1. css的3d注意事项

    1,如果要写出立体效果,所有的父容器都要添加属性transform-style: preserve-3d;不然子元素不能进行3d变换:背景色要写到最外层容器,且不能有transform-style: ...

  2. 删除重复数据并保留id最小的一条记录

    delete from  test where id not in ( select a.id from (select min(id) as id from test group by form_i ...

  3. 前端必备,十大热门的 JavaScript 框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不 ...

  4. Kotlin Doc

    { https://www.runoob.com/kotlin/kotlin-eclipse-setup.html }

  5. HDFS(Hadoop Distributed File System)的组件架构概述

    1.hadoop1.x和hadoop2.x区别 2.组件介绍 HDFS架构概述1)NameNode(nn): 存储文件的元数据,如文件名,文件目录结构,文件属性(生成时间,副本数,文件权限),以及每个 ...

  6. js 彻底理解回调函数

    一.前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果. function say (value) { alert(value); } alert(say); alert(say(' ...

  7. Java-Class-I:com.alibaba.fastjson.JSONObject

    ylbtech-Java-Class-I:com.alibaba.fastjson.JSONObject 1.返回顶部 1.1.import com.alibaba.fastjson.JSON;imp ...

  8. Java-Idea-笔记:lombok、微信支付依赖

    ylbtech-Java-Idea-笔记:lombok.微信支付依赖 1. idea-install-lombok返回顶部 1.0. P:问题描述Idea每打开一个类文件,类名就标红,不影响运行,但g ...

  9. scrapy-redis + Bloom Filter分布式爬取tencent社招信息

    scrapy-redis + Bloom Filter分布式爬取tencent社招信息 什么是scrapy-redis 什么是 Bloom Filter 为什么需要使用scrapy-redis + B ...

  10. [转]mysql主从同步

    Mysql镜像机制配置过程主服务器:   192.168.0.25从服务器:   192.168.0.26MYSQL版本:mysql-5.0.22.tar.gz安装日期:2010年5月14日  一.镜 ...