css中如何使用nth-of-type

这篇文章将为大家详细讲解有关css中如何使用nth-of-type，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　如何使用nth-of-type？

　　我们先来看看nth-of-type的具体描述，注意"："（冒号）在"nth-of-type（2n）"之前附加。

　　li:nth-of-type(2n){

　　}

　　（）内的"n"表示的是第几位，"2n"则表示是其是2的倍数

　　你还可以指定其他的数，比如"3n+1"、"odd"、"even"等。

　　我们来看一个具体的示例

　　代码如下

　　HTML代码

　　

　　

• 1

　　

• 2

　　

• 3

　　

• 4

　　

• 5

　　

• 6

　　

• 7

　　

　　CSS代码

　　sample.css

　　li:nth-of-type(2n){

　　color:#5bc0de;

　　}

　　li{

　　margin:10px;

　　font-size:120%;

　　}

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