3
nth-child(n)、first-child、last-child的用法
source link: https://www.fly63.com/article/detial/12194
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
更新日期: 2022-10-09阅读: 131标签: 元素分享
扫一扫分享
注：nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式。
nth-child（n）用法：
1、nth-child(3)
表示选择列表中的第3个标签，代码如下：
li:nth-child(3){background:#fff}表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，代码如下：
li:nth-child(2n){background:#fff}表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签，代码如下：
li:nth-child(2n-1){background:#fff}表示选择列表中的标签从第3个开始到最后，代码如下：
li:nth-child(n+3){background:#fff}表示选择列表中的标签从0到3，即小于3的标签，代码如下：
li:nth-child(-n+3){background:#fff}表示选择列表中的倒数第3个标签，代码如下：
li:nth-last-child(3){background:#fff}first-child用法：
1、first-childfirst-child表示选择列表中的第一个标签。代码如下：
li:first-child{background:#fff}last-child用法：
1、last-childlast-child表示选择列表中的最后一个标签，代码如下：
li:last-child{background:#fff}</div
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK