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; 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.隔行换色 变色 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来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
随机推荐
- 【笨嘴拙舌WINDOWS】GDI(2)
古时候,大师舞文之时需要笔墨纸伺候,不同笔,不同墨,作品风格迥异! 以下是windows提供的笔(带有墨): CreatePen(PS_SOLID,0,clRed); ...
- Qt Creator介绍
简介 Qt Creator是使用Qt开发的IDE.Qt支持Windows.Linux/Unix.Mac OS X.Android.BlackBerry.QNX等多种平台,Qt Creator为不同平台 ...
- UVa 10020 (最小区间覆盖) Minimal coverage
题意: 数轴上有n个闭区间[ai, bi],选择尽量少的区间覆盖一条指定线段[0, m] 算法: [start, end]为已经覆盖到的区间 这是一道贪心 把各个区间先按照左端点从小到大排序,更新st ...
- kafka_2.9.2-0.8.1.1分布式集群搭建代码开发实例
准备3台虚拟机, 系统是RHEL64服务版. 1) 每台机器配置如下:$ cat /etc/hosts # zookeeper hostnames: 192.168.8.182 ...
- Drawable和Bitmap的区别
Bitmap - 称作位图,一般位图的文件格式后缀为bmp,当然编码器也有很多如RGB565.RGB888.作为一种逐像素的显示对象执行效率高,但是缺点也很明显存储效率低.我们理解为一种存储对象比较好 ...
- USACO 2014 Open Silver Fairphoto
这道题只是银牌组的第一题而我就写了 3K 的代码.唉. Description - 问题描述 FJ's N cows (2 <= N <= 100,000) are standing at ...
- 【英语】Bingo口语笔记(73) - 以tly,tely结尾的误读
- SQL Server 2008 序列号
SQL Server 2008 序列号:Developer: PTTFM-X467G-P7RH2-3Q6CG-4DMYBEnterprise: JD8Y6-HQG69-P9H84-XDTPG-34 ...
- 【NYOJ-187】快速查找素数—— 枚举法、筛选法、打表法
快速查找素数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在给你一个正整数N,要你快速的找出在2.....N这些数里面所有的素数. 输入 给出一个正整数数N(N ...
- Image.FromFile 方法锁住文件解决方法
Image.FromFile 一旦使用后,对应的文件在一直调用 其生成的Image对象被Disponse前都不会被解除锁定,这就造成了一个问题,就是在这个图形被解锁前无法对图像进行操作(比如删除,修 ...