这东西同有用的,对于处理细节样式效率颇高。今天在给INLODZ主题添加新的小工具时用到了。所以记录一下,直接在网上搜关键字“css倒数第几个” 发现居然没有谈到这个东西。这个属于伪类选择器所以使用时前面要带冒号:
- :first-child 选择某个元素的第一个子元素;
- :last-child 选择某个元素的最后一个子元素;
- :nth-child() 选择某个元素的一个或多个特定的子元素;
- :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算,也就是倒数第几;
- :nth-of-type() 选择指定的元素;
- :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
- :first-of-type 选择一个上级元素下的第一个同类子元素;
- :last-of-type 选择一个上级元素的最后一个同类子元素;
- :only-child 选择的元素是它的父元素的唯一一个了元素;
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :empty 选择的元素里面没有任何内容。
最常用的要属 first-child 、 last-child 了,表示父级元素下的第一个子元素、最后一个子元素 。
而nth-child(n)更灵活 ,只不过IE6-8和FF3等浏览器不支持":nth-child"选择器。
:nth-child(length);/*参数是具体数字*/ :nth-child(n);/*参数是n,n从0开始计算*/ :nth-child(n*length)/*n的倍数选择,n从0开始算*/ :nth-child(n+length);/*选择大于length后面的元素*/ :nth-child(-n+length)/*选择小于length前面的元素*/ :nth-child(n*length+1);/*表示隔几选一*/ //上面length为整数
还有一个nth-last-child(n) 这个看意思就知道了,与nth-child 第一个元素开始相反,它是从最后一个元素开始数,也就是倒数n个元素。
多余的就不记录了,网上都有。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4393.html