nth-child和nth-of-type的简单比较

　　nth-child()是怎样工作的？

　　nth-child()伪类用于根据数字匹配元素，该数字表示元素在其兄弟元素中的位置。更具体地说，数字表示文档树中元素（减去1）之前存在的兄弟姐妹的数量。

　　这个数表示为函数a+b，其中n是索引，a和b是我们通过的任何整数。例如，为了选择每一个元素，我们可以编写以下任何一个：

　　:nth-child(1n+0){/*样式*/}

　　:nth-child(n+0){/*样式*/}

　　:nth-child(1n){/*样式*/}

　　除了使用这个函数，我们还可以传递一个整数，例如:nth-child(1)，或者set关键字，odd（奇数）或者even（偶数）。这些关键字是写出用于选择每个奇数或偶数元素的函数符号的备选方案。

　　:nth-child(odd){/*奇数元素的样式*/}

　　:nth-child(2n+1){/*奇数元素的样式*/}

　　:nth-child(even){/*偶数元素的样式*/}

　　:nth-child(2n+0){/*偶数元素的样式*/}

　　:nth-child()单独使用时，可以很容易地预测选择哪个元素。例如，使用此标记：

　　<divclass="example">

　　<p>Thisisa<em>paragraph</em>.</p>

　　<div>Thisisa<em>divider</em>.</div>

<div>Thisisa<em>divider</em>.</div>

　　<p>Thisisa<em>paragraph</em>.</p>

　　<div>Thisisa<em>divider</em>.</div>

　　<p>Thisisa<em>paragraph</em>.</p>

　　<div>Thisisa<em>divider</em>.</div>

　　</div>

　　如果我们想选择第五个元素div，我们可以简单地写下面的内容

　　.example:nth-child(5){background:#ffdb3a;}

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56616.shtml