博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
cSS3 伪类:nth-child 的使用方法
阅读量:6250 次
发布时间:2019-06-22

本文共 493 字,大约阅读时间需要 1 分钟。

:nth-child是一个非常牛逼的伪类,如果你能很好的理解它就可以用CSS 做出很多非常实用的效果。当我很年轻的时候还使用PHP的i++来实现一些东西,其实CSS 完全可以实现。下面是我总结的一些用法,用了可爱的糖糖做演示,彩色头像就代表选中,T,T。

仅选择第5个

5

li:nth-child(5) {    ...  }

如果选择第一个元素的话你可以使用:first-child或者用上面的方法。

 

除了前五个全部选择

6-10

li:nth-child(n+6) {    ... }

只选择前5个

1-5

li:nth-child(-n+5) {   ...}

从第一个开始,每隔4个选择一个

159

li:nth-child(4n-7) {  /* or 4n+1 */   ...}

选择奇数或者偶数

odd

li:nth-child(odd) {    ...}

even

li:nth-child(even) {   ...}

选择最后一个

last

li:last-child {    ...}

选择倒数第二个

9

-EOF-

转载于:https://www.cnblogs.com/sunshq/p/4142296.html

你可能感兴趣的文章
shim和polyfill在javascript中的含义
查看>>
洛谷 P1195 口袋的天空(最小生成树)
查看>>
java语言基础与go语言基础,开发环境的区别
查看>>
Git之fatal: remote origin already exists
查看>>
使用JQ实现相同行或列合并
查看>>
Python中的__name__和类
查看>>
Lambda 表达式的示例-来源(MSDN)
查看>>
python socket之tcp服务器与客户端demo
查看>>
CesiumLab V1.4 新功能 BIM数据处理
查看>>
Red Hat发布开源PaaS OpenShift Origin
查看>>
python常用模块-time,datetime
查看>>
Linux中常用操作命令
查看>>
httpd基于用户的站点访问控制
查看>>
网页中的各种长宽、坐标
查看>>
lua程序设计之协同程序
查看>>
我的友情链接
查看>>
Nginx配置SSL证书
查看>>
AskoziaPBX 安装
查看>>
Tutorial for adding a library project as git submodule and then using it as a studio Module
查看>>
crontab + mysqldump 解决每天定时自动备份MySQL数据库
查看>>