记录CSS样式中的nth-of-type伪元素选择前几个或后几个

温馨提示:文章已超过729天没有更新,可能存在链接失效,相关教程仅供参考

CSS样式的nth-of-type伪元素选择前几个或后几个。nth使用时应该注意几点。(n)中的n如果有运算,n必须放在前面,n从0开始递增,()内运算结果大于元素个数,运算自动停止。

说明:background: #398ef6; 为li背景颜色样式

选择1~9<li>如下

li:nth-of-type(-n+9) {background: #398ef6;}

选择9~最后<li>如下

li:nth-of-type(n+9) {background: #398ef6;}

选择倒数2个<li>如下

li:nth-last-of-type(-n+2) {background: #398ef6;}

nth-child也是同样用法

li:nth-child(-n+9) {background: #398ef6;}             //1~9个

li:nth-child(n+9) {background: #398ef6;}              //9~最后

li:nth-last-of-type(-n+2) {background: #398ef6;}      //倒数


© 除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处

取消
微信二维码
微信二维码
支付宝二维码