tnblog
首页
精品
资源
登录
本来什么都没有,终将什么都失去。不应贪心没得到的,而该珍惜和感恩拥有的
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术

css3伪类选择器 nth-child

105人阅读 2020/11/17 17:11 总访问:431192 评论: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;
}

评价