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. 线程——委托InvokeRequired和Invoke

    C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它.此时它将会在内部调用ne ...

  2. visual studio 2015常用快捷键

    常用快捷键 技巧 0.0 删除文件中的当前行: Home + Shife-End + Delete 技巧 1.1 避免意外复制一个空白行 工具->选项->文本编辑器->所有语言-&g ...

  3. HDU 1525 (博弈) Euclid's Game

    感觉这道题用PN大法好像不顶用了,可耻地看了题解. 考虑一下简单的必胜状态,某一个数是另一个数的倍数的时候是必胜状态. 从这个角度考虑一下:游戏进行了奇数步还是偶数步决定了哪一方赢. 如果b > ...

  4. java动态代理Proxy

    package com.gz_06; public interface StudentDao { public void login(); public void regist(); } packag ...

  5. matlab中矩阵和向量的创建

    1.向量的创建 1)直接输入: 行向量:a=[1,2,3,4,5] 列向量:a=[1;2;3;4;5] 2)用“:”生成向量 a=J:K 生成的行向量是a=[J,J+1,…,K] a=J:D:K 生成 ...

  6. PHP实现站点pv，uv统计（三）

    数据分析脚本如下: //error_reporting(0);date_default_timezone_set("PRC");$environment = get_cfg_var ...

  7. foreach的指针问题

    从代码: $arr = array(,,,,); echo '$arr = array(1,2,3,4,5)','<br>'; foreach($arr as $key => &am ...

  8. SpringMvc+jquery easyui模块开发7步骤

    搞了一段java的开发,总结出模块开发经验: SpringMvc+jquery easyui模块开发7步骤:1) 数据表(table):                定义表结构并创建数据表t_use ...

  9. Java RunTime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. ......

    mkdir jre cd jre ln -s 你的JDK目录/bin bin 例如:ln -s /usr/lib/jvm/jdk1.8.0_25/bin bin 原文地址:http://www.cnb ...

  10. Codeforces Round #214 (Div. 2) c题(dp)

    C. Dima and Salad time limit per test 1 second memory limit per test 256 megabytes input standard in ...