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. fix org.openqa.selenium.NoSuchWindowException when find element on windows8.1 ie11.

    Steps:1.I was able to resolve the issue after adding the site URL under trusted sites of IE. The sam ...

  2. C#中的lock关键字;就是lock住一个大家都共同访问的（静态static的）东东就行了

    public class ChatService : IChat //继承IChat接口或者说IChat的实现类 { //定义一个静态对象用于线程部份代码块的锁定,用于lock操作 private s ...

  3. 16.Object－C－－NSArray数组的排序

    今天我来总结一下NSArray数组的排序方式. NSArray数组的排序有三种方式: 1.简单排序(sortedArrayUsingSelector:) 2.利用block语法(sortedArray ...

  4. 四、Emmet：快速编写HTML,CSS代码的有力工具

    介绍 Emmet是一个插件,在IDE中安装该插件后即可使用该功能. HTML代码写起来虽简单,但是重复代码很多,Emmet能够存在一种HTML代码简写法(比较类似CSS的选择器写法),比如 div.c ...

  5. iOS 9的新内容

    https://www.hackingwithswift.com/ios9 Search extensibility Update: I wrote a tutorial on Core Spotli ...

  6. activiti参考5-任务TASK

    一.概要 1,设计TASK的表主要是:ACT_RU_TASK,ACT_HI_TASKINST(见参考-activiti表): 2,任务主要有:人工任务(usertask),服务任务(serviceta ...

  7. python练习程序（c100经典例1）

    题目: 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? num=0; for i in range(1,5): for j in range(1,5): for k in ...

  8. Node.js的循环依赖

    我们知道在实际编程过程中,要尽可能的减少或者规避循环依赖情况的发生.但在现实环境中,有时却不得不产生循环依赖.Node.js不提倡使用循环依赖,但真有如此情况发生时Node.js也有办法解决.这篇博文 ...

  9. mysql 添加索引后 在查询的时候是mysql就自动从索引里面查询了。还是查询的时候有单 独的参数查询索引？

    MYSQL在创建索引后对索引的使用方式分为两种:1 由数据库的查询优化器自动判断是否使用索引:2 用户可在写SQL语句时强制使用索引 下面就两种索引使用方式进行说明第一种,自动使用索引.数据库在收到查 ...

  10. canvas小知识

    清单 1. 绘制 canvas 矩形 function drawRect(){ var canvas = document.getElementById('canvas'); if (canvas.g ...