当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS伪类选择器nth-child()

时间:2013-03-02 03:43来源:未知 作者:admin 点击:

标签:CSS伪类选择器nth-child() 伪类(6)odd(2)CSS(655)这跟(1)选择器(20)nth-child(3)稍等(1)
稍等!这跟odd是一样的!所以1就不必要屡次呈现了。当初,再看我们本来的例子就感到代码庞杂了些。我们可以用3n+0甚至3n取代3n+3. (3 x 0) = 0 = no match (3 x 1) = 3 = 3rd Element (3 x 2) = 6 = 6th Element (3 x 3) = 9 = 9th Element 等等 总的来说nth
CSS伪类选择器nth-child()》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332Q2013.htm

稍等!这跟“odd”是一样的!所以”1“就不必要屡次呈现了。当初,再看我们本来的例子就感到代码庞杂了些。我们可以用“3n+0&rdquo,css伪类时冒号前后多个空格可导致该规则失效;甚至“3n”取代“3n+3”.
(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
等等

总的来说nth-child()圆括号里面支持两个要害词:even与odd。他们应当很显明的,even选择偶数标签,如第2、第4、第6等等。odd选择奇数标签,如第1,第3,第5等等。

中文原文:nth-child()工作原理
英文原文:How nth-child Works

这是一个css抉择器,一个真正的伪类取舍器,它就是nth-child(),下面是应用它的典范。
ul li:nth-child(3n+3) {
color: #ccc;
}

www.sitepoint.com站点有很好的参数讲授与领导,包含一些手动列表。我直接宣布到这里了!

Tag:nth-child()   选择器     nth-child()   选择器  ,CSS优化使网页具有语义化;  ,CSS仿360体验版左侧导航菜单; --> [网站建设之]CSS伪类选择器nth-child()

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3 0 1 1 4 - - 3 1 3 5 8 4 3 2 2 5 9 12 8 8 1 3 7 13 16 12 13 - 4 9 17 20 16 18 - 5 11 21 24 20 23 -

使用“-n”值看起来有点怪僻。如果方程式计算得到的值是负数,他就不指定任何元素标签,CSS代码缩写精简实例。正如成果展现的那样,这是一个相称聪慧的技巧,你可以使用&ldquo,CSS代码整合(下);-n+3&rdquo,CSS代码整合(上);选择选择前多少个元素标签。

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
等等。

“n”则表现大于即是0的整数。由此可见 3n就是3 x n,这个方程式就可以说明为”(3xn)+3″,也就是n为0或大于0的整数。于是我们能够得到
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
等等
:nth-child(2n+1)又是怎么盘算的那?
(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
等等

让咱们回到刚开端例子里面的“3n+3”上面吧,他的工作原理是怎么的?为什么他仅仅挑选3倍数的标签元素?这里就要懂得“n”与数学方程式的计算。

上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列。也就是第3个,CSS书写顺序建议及CSS HACK(FF&IE兼容),第6个,第9个等等。然而它工作原理是怎样的那,CSS之兼容浏览器篇?如果碰到其它情形你又如何使用nth-child那?

正如你在第一个例子里面看到的,nth-child()的圆括号里也支撑方程式的,CSS之一条龙网站最主要是做好布局,是最简略的方程式吗?仅仅是数字,CSS中视觉语义不等于基于表现的类。假如你在圆括号里面输入一个数字,那它仅仅选择这个数量对应的那个标签。比方,如何仅仅选择第5个标签元素。
ul li:nth-child(5) {
color: #ccc;
}

正如你所看到的,我们不必+3就可以做到同样的后果。我们也可以使用负数。在方程式里面使用减法,如4n-1;
(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
等等

相干文章推举
:nth-child()
Understanding :nth-child Pseudo-class Expressions


(责任编辑:网站建设)
CSS伪类选择器nth-child()相关文章
上一篇:css伪类时冒号前后多个空格可导致该规则失效 下一篇:CSS使用技巧大全
回到顶部