首先说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. 三种Spring加载机制

    方法一. 在main方法中启动Spring ApplicationContext ac = new XmlApplicationContext("applicationContext.xml ...

  2. Android NDK 环境变量配置

    NDK_ROOT = C:\__S_D_K__\AndroidNDK\android-ndk-r20 在path 中加入  %NDK_ROOT% 我的路径在C盘 //个别的程序可能需要 NDK_ROO ...

  3. JavaWeb学习篇之----web应用的虚拟目录映射和主机搭建(Tomcat)

    从今天开始来学习JavaWeb的相关知识,之前弄过一段时间JavaWeb的,就是在做毕业设计的时候搞过,但是那时候完全是为了任务去学习,所以效果不好,好多东西都没有深入的研究过,所以接下来的一段时间我 ...

  4. bzoj1001题解

    [解题思路] 显然,这题的答案是这个网格图的最小割.根据最大流-最小割定理,我们可以用网络流算法来求其最小割,时间复杂度最小为O(V2√E). 特殊的,这个网格图是一个平面图,于是可以根据平面图最小割 ...

  5. Python 爬取12306火车票

    获取火车站 stations.py #import certifi #import urllib3 import re import requests from pprint import pprin ...

  6. tomcat部署安全证书文件(阿里云SSL证书)

    1.下载安全证书文件: 这里使用的是阿里云SSL证书(免费一年) 2.把下载的压缩包进行解压 3.将pfx文件拷贝至服务器 4.利用jdk将pfx转jks 5.cmd进入命令行 6.切换至jdk的bi ...

  7. delphi DrawText 的用法

    DrawText(hDC: HDC; {设备句柄}lpString: PChar; {文本}nCount: Integer; {要绘制的字符个数; -1 表示全部}var lpRect: TRect; ...

  8. Spring-Security (学习记录三)--读取数据库中的用户和角色

    目录 1.先将hibernate的环境整合进来 2.创建一个数据库security,执行security.sql 3.修改spring-security.xml,采用数据库的方式读取用户跟角色 4.u ...

  9. 全局唯一标识符(GUID,Globally Unique Identifier)

    全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中.在理想情况 ...

  10. 剑指offer——06二叉树的下一个节点

    题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针.   题目的意思是,在一颗二叉树的中序遍历中,给出其中一 ...