- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- #list{font-family:"Microsoft yahei"; font-size:14px;}
- #list dt,#list dd{height:30px; line-height:30px; text-align:center; color:#000; list-style:none;}
- #list dt:nth-child(odd){color:#fff; background:#900;}/*当前dl列表的第奇数个子元素如果是dt子元素,那么将选择它*/
- #list dt:nth-child(even){background:#090;}/*当前dl列表的第偶数个子元素如果是dt子元素,那么将选择它*/
- </style>
- </head>
- <body>
- <dl id="list">
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- </dl>
- </body>
- </html>
复制代码从上面的代码中,我们可以发现明明设置了奇数行和偶数行的dt,按道理来讲,应该是如下图这种运行效果才对:
这是因为,nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候,是连通父级元素中的所有子元素一起计算的,换句话说,dt:nth-child(odd)这句话的含义,并不是指“当前dl列表中的第奇数个dt子元素来计算”,而是指“当前dl列表的第奇数个子元素如果是dt子元素,那么将选择它”,那么这种计算方式与我们所“理解”的这种需求怎么计算呢?
nth-of-type选择器和nth-last-of-type选择器
这两个选择器可以避免上述的问题,CSS3在计算子元素是第奇数个还是第偶数个自元素的时候,就只针对同类型的子元素进行计算了,这两个选择器的使用方法如下所示:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- #list{font-family:"Microsoft yahei"; font-size:14px;}
- #list dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}
- #list dd{color:#000;}
- #list dt:nth-of-type(odd){background:#900;}/*奇数行*/
- #list dt:nth-of-type(even){background:#090;}/*偶数行*/
- </style>
- </head>
- <body>
- <dl id="list">
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- <dt>前端开发网(W3Cfuns.com)!</dt>
- <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
- </dl>
- </body>
- </html>
复制代码
CSS3每日一练之选择器-结构性伪类选择器的更多相关文章
-
Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
-
CSS3 结构性伪类选择器(2)
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
-
CSS3 结构性伪类选择器(1)
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
-
【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
-
【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
-
【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
-
css3 巧用结构性伪类选择器
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: <style type="text/css" ...
-
谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
-
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
随机推荐
-
NSLog函数重写
跟C++的输出函数相比,NSlog函数有个很大的优势,就是它可以输出对象. 在实际使用过程中,我们可以通过实现description函数来实现对NSLog函数的重写 -(NSString*)descr ...
-
Ubuntu用户相关基本命令
Linux是一个用户权限管理得很严格的系统,Ubuntu作为最受欢迎的桌面发行版,提供了简单易用的图形界面工具来管理用户,但是命令行工具往往更强大,用得熟练的话效率会更高.用户管理命令常用的有如下几个 ...
-
working copy locked 问题
解法 1 : 右键svn-->clean up 解法 2 : 被lock的文件夹进入控制台 del lock /q/s [转载解法] SVN 本地更新时,由于一些操作中断更新,如磁盘空间不够 ...
-
Open Live Writer增加代码插件
作为一名程序员,免不了和代码打交道,自然在写博客的时候,也会用到代码的展示,Open Live Writer确实是一个不错的工具,不用再去登录博客的后台,就可以在本地进行文章的编写,但是致 ...
-
codevs 1027 姓名与ID
/* 二分图匹配 建图稍麻烦点 不过 有STL大法带我上天 说正经的 先假设都有关系 然后把确定的没有关系的删掉 这样跑出来的一定是完美匹配 至于确定的匹配嘛 删掉这一条 不再是完美匹配 然后记下排序 ...
-
Repository、IUnitOfWork和IDbContext
DDD 领域驱动设计-谈谈Repository.IUnitOfWork和IDbContext的实践 上一篇:<DDD 领域驱动设计-谈谈 Repository.IUnitOfWork 和 IDb ...
-
Visual Studio 单元测试之二---顺序单元测试
原文:Visual Studio 单元测试之二---顺序单元测试 此文是上一篇博文:Visual Studio 单元测试之一---普通单元测试的后续篇章.如果读者对Visual Studio的单元测试 ...
-
深入理解计算机系统_3e 第八章家庭作业 CS:APP3e chapter 8 homework
8.9 关于并行的定义我之前写过一篇文章,参考: 并发与并行的区别 The differences between Concurrency and Parallel +---------------- ...
-
听大佬学长RQY报告有感
听了RQY大佬的报告,我深有感触…… 数学基础很重要.首先我们要学好数学,众所周知信息学奥赛的实质是做数学题.如果你的编程能力再高,绞尽脑汁就是不会解数学题那有什么用呢?如果你会解数学题,那么你可以根 ...
-
mariadb第二章-增删改
MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型 整数:int, bit 小数:de ...