css如何使用nth-child和nth-of-type

这篇文章将为大家详细讲解有关css如何使用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>

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

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

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

　　<div>Thisisa<em>divider</em>.</div><!--选择元素-->

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

　　<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;}

关于“css如何使用nth-child和nth-of-type”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。