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. Android开源库--PhotoView图片查看

    如果说我比别人看得更远些,那是因为我站在了巨人的肩上. github地址:https://github.com/chrisbanes/PhotoView 介绍 在一般的应用中,总会遇到查看图片的功能, ...

  2. maven-source 1.3 中不支持注释请使用 -source 5 或更高版本以启用注释

    解决办法:在pom里 加上以下代码 <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...

  3. Hadoop实战课程

    Hadoop生态系统配置Hadoop运行环境Hadoop系统架构HDFS分布式文件系统MapReduce分布式计算(MapReduce项目实战)使用脚本语言Pig(Pig项目实战)数据仓库工具Hive ...

  4. 指针数组vs数组指针 指针函数vs函数指针

    在分辨这些重要的概念时,我们先回顾一下前面所讲的C之三值合一,由于三个值所求出的地址是相同的,所以经常有传言说他们都是首元素的地址.这种说法是不正确的.为什么说它是不正确的呢? 首先定义一个指针,将三 ...

  5. Struts2配置之Struts.properties

    Struts 2框架有两个核心配置文件,其中struts.xml文件主要负责管理应用中的Action映射,以及该Action包含的Result定义等.除此之 外,Struts 2框架还包含     s ...

  6. Solr单机部署和集群部署

    用到的相关jar包:http://pan.baidu.com/disk/home#list/path=%2Fsolr Solr目录结构 Solr 目录 Contrib :solr 为了增强自身的功能, ...

  7. 写python时加入缩进设置

    发现如果用vim写python的时候,还是设成8好像会报错,在现有的基础上,加入下面设置就好了set shiftwidth=4

  8. DB2因表空间不够产生load表失败

    今天下午恢复表的时候发现出现错误: SQL3520W  Load Consistency Point was successful. SQL3110N  The utility has complet ...

  9. Yii入门，登录

    验证和授权在页面需要限制访问时用到.验证就是确认某人就是他所声称的那个人.通常涉及到用户名和密码,但也包含其他方式,例如智能卡,指纹等.授权是在验证用户后,查明他是否被允许管理指定的资源.通常判断他是 ...

  10. bjfu1262 优先队列

    比较典型的应用优先队列的题.题目是在一个长为n的数组中,依次问m个数中的最小值.那么把值和下标做成一个结构体,放进优先队列里,每次移动窗口就把该T的T掉,剩下的最小值就是答案,复杂度nlogn,轻松a ...