tnblog
首页
精品
资源
登录
该你吃的苦,生活会一个也不会少,该你获得的幸福,生命早晚都会给你
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术

css3伪类选择器 nth-child

321人阅读 2020/11/17 17:11 总访问:513947 评论:0 手机 收藏
分类: 前端


选中第一个元素:

.container > div:first-child {
    background: #abcdff;
}


选中最后一个可以使用last-child

.container > div:last-child{
    background: #abcdff;
}



可以通过传递具体的数字选中具体的子元素:

.container > div:nth-child(1) {
    background: #abcdff;
}

.container > div:nth-child(2) {
    background: #ffabcd;
}

.container > div:nth-child(3) {
    background: #aacc66;
}

.container > div:nth-child(4) {
    background: #EDC951;
}


可以通过n表示变量,例如实现基偶选择:

.container > div:nth-child(2n+1) {
    background: #abcdff;
}

.container > div:nth-child(2n) {
    background: #ffabcd;
}


可以实现周期颜色轮换,例如4个颜色一个周期:

.container > div:nth-child(4n-1) {
    background: #abcdff;
}

.container > div:nth-child(4n-2) {
    background: #ffabcd;
}

.container > div:nth-child(4n-3) {
    background: #aacc66;
}

.container > div:nth-child(4n) {
    background: #EDC951;
}


欢迎加群讨论技术,群号:677373950

评价