1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
  6. <style type="text/css">
  7. *{margin:0; padding:0;}
  8. #list{font-family:"Microsoft yahei"; font-size:14px;}
  9. #list dt,#list dd{height:30px; line-height:30px; text-align:center; color:#000; list-style:none;}
  10. #list dt:nth-child(odd){color:#fff; background:#900;}/*当前dl列表的第奇数个子元素如果是dt子元素，那么将选择它*/
  11. #list dt:nth-child(even){background:#090;}/*当前dl列表的第偶数个子元素如果是dt子元素，那么将选择它*/
  12. </style>
  13. </head>
  14. <body>
  15. <dl id="list">
  16. <dt>前端开发网(W3Cfuns.com)!</dt>
  17. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  18. <dt>前端开发网(W3Cfuns.com)!</dt>
  19. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  20. <dt>前端开发网(W3Cfuns.com)!</dt>
  21. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  22. <dt>前端开发网(W3Cfuns.com)!</dt>
  23. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  24. <dt>前端开发网(W3Cfuns.com)!</dt>
  25. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  26. </dl>
  27. </body>
  28. </html>

复制代码从上面的代码中，我们可以发现明明设置了奇数行和偶数行的dt，按道理来讲，应该是如下图这种运行效果才对：

<ignore_js_op>

　　这是因为，nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候，是连通父级元素中的所有子元素一起计算的，换句话说，dt:nth-child(odd)这句话的含义，并不是指“当前dl列表中的第奇数个dt子元素来计算”，而是指“当前dl列表的第奇数个子元素如果是dt子元素，那么将选择它”，那么这种计算方式与我们所“理解”的这种需求怎么计算呢？

nth-of-type选择器和nth-last-of-type选择器
　　这两个选择器可以避免上述的问题，CSS3在计算子元素是第奇数个还是第偶数个自元素的时候，就只针对同类型的子元素进行计算了，这两个选择器的使用方法如下所示：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
  6. <style type="text/css">
  7. *{margin:0; padding:0;}
  8. #list{font-family:"Microsoft yahei"; font-size:14px;}
  9. #list dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}
  10. #list dd{color:#000;}
  11. #list dt:nth-of-type(odd){background:#900;}/*奇数行*/
  12. #list dt:nth-of-type(even){background:#090;}/*偶数行*/
  13. </style>
  14. </head>
  15. <body>
  16. <dl id="list">
  17. <dt>前端开发网(W3Cfuns.com)!</dt>
  18. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  19. <dt>前端开发网(W3Cfuns.com)!</dt>
  20. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  21. <dt>前端开发网(W3Cfuns.com)!</dt>
  22. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  23. <dt>前端开发网(W3Cfuns.com)!</dt>
  24. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  25. <dt>前端开发网(W3Cfuns.com)!</dt>
  26. <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>
  27. </dl>
  28. </body>
  29. </html>

复制代码

CSS3每日一练之选择器-结构性伪类选择器的更多相关文章

  1. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  2. CSS3 结构性伪类选择器（2）

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

  3. CSS3 结构性伪类选择器（1）

    1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...

  4. 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

    结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...

  5. 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...

  6. 【CSS3】---结构性伪类选择器-root+not+empty+target

    结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...

  7. css3 巧用结构性伪类选择器

    最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: <style type="text/css" ...

  8. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

随机推荐

  1. win7 64位系统 Oracle32bit + PL/SQL访问Orale服务，Oracle 11g的安装，中文乱码问题的解决

    前几天装了个Oracle32bit客户端 + PL/SQL连接不上oracle,我安装完打开PL/SQL登录界面跟正常的界面不一样,没有那个连接为Normal.SYSDBA的选项,下面有解释,至于我为 ...

  2. android 内存溢出问题分析

      最近的项目中,内存一直再增长,但是不知道是什么问题,导致内存溢出,在网上看到了这么一篇关于内存分析与管理的文章,解决了部分问题,感觉这篇文 章还不错,就转帖到我的blog上了,希望对大家有所帮助. ...

  3. 点滴积累【SQL Server】---SQL语句操作约束

    说明: --主键约束(Primary Key constraint):要求主键列的数据唯一,并且不允许为空. --唯一约束(Unique Constraint):要求该列唯一,允许为空,但只能出现一个 ...

  4. Drawable和Bitmap的区别

    Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...

  5. Ensemble Learning 之 Bagging 与 Random Forest

    Bagging 全称是 Boostrap Aggregation,是除 Boosting 之外另一种集成学习的方式,之前在已经介绍过关与 Ensemble Learning 的内容与评价标准,其中“多 ...

  6. aspose.word使用简单方法

    概念介绍 使用aspose生成word报表步骤: 加载word模板 提供数据源 填充 加载模板 提供了4种重载方法 public Document(); public Document(Stream ...

  7. IClassSchemaEdit修改要素类信息

    private void ChangeFeatureClassAliasName(IFeatureClass pFeatureClass, string aliasName) { ISchemaLoc ...

  8. php 实现 jsonp 数据接口

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. 配置php支持curl

    curl是一个利用URL语法在命令行方式下工作的文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP.cu ...

  10. Wiki知识介绍

    Wiki简介 Wiki一词来源于夏威夷语的“wee kee wee kee”,原本是“快点快点”的意思,被译为“维基”或“维客”.一种多人协作的写作工具.Wiki站点可以有多人(甚至任何访问者)维护, ...