查看一个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 可以是数字、关键词或公式。


如您从本文得到了有价值的信息或帮助,请考虑扫描文末的二维码对我进行赞赏和鼓励。

与《CSS3 :nth-of-type() 选择器-css选择第几个元素》相关的博文:


发布时间 06/27/2014 09:50:01所属栏目 Program Code.所属标签 .

留言

Admin Avatar