li元素的常见伪类:ul列表第一个li和最后一个li的样式解决办法
摘要:在网站开发中,尤其是对资讯网站中,通常需要做出热门文章的列表,排名等等样式,里面就会应用到排序的从0-1…
摘要:在网站开发中,尤其是对资讯网站中,通常需要做出热门文章的列表,排名等等样式,里面就会应用到排序的从0-10等等数值,数值…
在网站开发中,尤其是对资讯网站中,通常需要做出热门文章的列表,排名等等样式,里面就会应用到排序的从0-10等等数值,数值中,我们通常会对前三或是前五进行特别的样式调整。比如我们需要把第一个改成红色的背景,把最后一个样式下面加一个更多的按钮 ,这样我们都可以使用li伪类来对前端的样式进行调整。
尤其是在wordpress主题的开发中,在前端应用很广泛li的第一个及最后一个都可以进行单独的设置,甚至是li的奇偶数的,或是特定的某个位置都可以使用伪类来进行设置,相当于li的一个小跟班,只对某个li起作用。
1
2
3
4
5
6
|
第一个li的样式:li:first–child { background:#f00; }
最后一个li的样式:li:last–child { background:#000; }
第n个li的样式:li:nth–child(n) { background:#000; }
倒数第二个li的样式:nth–last–of–type(2){ background:#000; }
奇数列表:li:nth–child(odd) { background:#f00; }
偶数列表:li:nth–child(even) { background:#f00; }
|
类别:WordPress教程、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!