查看一个html5的源码,发现导航的效果做的有点意思,看了下css,原理是利用了css3的一个选择前实现的。代码如下:

		header nav ul li:nth-of-type(2) a {
background:#0184cd;
background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
}

关于nth-of-type(),w3school的讲解如下:
定义和用法
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。

Related Posts: CSS3 :nth-of-type() 选择器-css选择第几个元素 :