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. 浅谈javascript中的作用域

    首先说明一下:Js中的作用域不同于其他语言的作用域,要特别注意     JS中作用域的概念: 表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境.Javascript的作 ...

  2. Tomcat遇到”Error listenerStart”或”Error filterStart”问题且无详细日志时的log配置.

    昨天部署web应用到Tomcat之后,无法成功启动,并且控制台没有详细的错误信息,顶多就两行提示信息,例如:严重: Error listenerStart严重: Context [/lizongbo] ...

  3. 51nod1349 最大值

    还是傻叉单调栈 #include<cstdio> #include<cstring> #include<cctype> #include<algorithm& ...

  4. source导入错码解决办法

    mysql -uroot -p --default-character-set=utf8 test < D:/bak/1.sql

  5. VFL示例

    •[cancelButton(72)]-12-[acceptButton(50)] •取消按钮宽72point,accept按钮宽50point,它们之间间距12point • •[wideView( ...

  6. HDU 2577 How to Type (DP，经典)

    题意: 打字游戏,求所按的最少次数.给出一个串,其中有大小写,大写需要按下cap键切换到大写,或者在小写状态下按shift+键,这样算两次,打小写时则相反.注意:在打完所有字后,如果cap键是开着的, ...

  7. 迁移应用数据库到MySQL Database on Azure

    by Rong Yu 有用户问怎么把他们应用的数据库迁移到MySQL Database on Azure上,有哪些方式,有没有需要注意的地方.今天我们来概括介绍一下迁移应用数据库到MySQL Data ...

  8. python练习程序（c100经典例19）

    题目: 一个数如果恰好等于它的因子之和,这个数就称为“完数”.例如6=1+2+3.编程找出1000以内的所有完数. def foo(a): sra=a; lis=[1]; while 1: for i ...

  9. 理解matplotlib绘图

    matplotlib是基于Python语言的开源项目,旨在为Python提供一个数据绘图包.Matplotlib 可能是 Python 2D-绘图领域使用最广泛的套件.它能让使用者很轻松地将数据图形化 ...

  10. android学习视频（实战项目演练）

    1.基于Android平台实战无线点餐系统(客户端(Client)和服务端(Server))①http://kuai.xunlei.com/d/xmBrDwI8CAAyXVFRa3d②http://k ...