![]() |
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
CSS伪类选择器nth-child() | |||||||||||||||||||||||||||||||||||||||||||||||||||
2010-11-13 17:58:27 文/网络收集 出处:电脑软硬件应用网 | |||||||||||||||||||||||||||||||||||||||||||||||||||
这是一个css选择器,一个真正的伪类选择器,它就是nth-child(),下面是使用它的范例。 上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列。也就是第3个,第6个,第9个等等。但是它工作原理是怎样的那?如果遇到其它情况你又如何使用nth-child那? 总的来说nth-child()圆括号里面支持两个关键词:even与odd。他们应该很明显的,even选择偶数标签,如第2、第4、第6等等。odd选择奇数标签,如第1,第3,第5等等。 正如你在第一个例子里面看到的,nth-child()的圆括号里也支持方程式的,是最简单的方程式吗?仅仅是数字。如果你在圆括号里面输入一个数字,那它仅仅选择这个数目对应的那个标签。比如,如何仅仅选择第5个标签元素。 让我们回到刚开始例子里面的“3n+3”上面吧,他的工作原理是怎样的?为什么他仅仅选择3倍数的标签元素?这里就要理解“n”与数学方程式的计算。 “n”则表示大于等于0的整数。由此可见 3n就是3 x n,这个方程式就可以解释为”(3xn)+3″,也就是n为0或大于0的整数。于是我们可以得到 稍等!这跟“odd”是一样的!所以”1“就没有必要多次出现了。现在,再看我们原来的例子就感觉代码复杂了些。我们可以用“3n+0”甚至“3n”代替“3n+3”. 正如你所看到的,我们不用+3就可以做到同样的效果。我们也可以使用负数。在方程式里面使用减法,如4n-1; 使用“-n”值看起来有点古怪。如果方程式计算得到的值是负数,他就不指定任何元素标签。正如结果展示的那样,这是一个相当聪明的技术,你可以使用“-n+3”选择选择前几个元素标签。 -0 + 3 = 3 = 3rd Element www.45its.com站点有很好的参数讲解与指导,包括一些手动列表。我直接发布到这里了!
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
最新热点 | 最新推荐 | 相关文章 | ||
css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… CSS中设置段落间距的方法 |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |