列表项,有时需要判断列表首尾,来筛选设置样式
如上图,三个项有间隔,怎么保证设置了列表项之间的距离后,整体还水平居中显示呢?
.item:not(:first-child) {
margin-left: 20px;
}
View Code
以上是CSS :first-child 选择器的用法
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
更多的,还有其它的指定元素选择器:
:last-child 选择属于其父元素最后一个子元素。:nth-child(2) 选择第二个元素:nth-last-child(2) 选择倒数第二个元素
还有first-of-type、last-of-type、nth-of-type(2)、nth-last-of-type(2),以类型筛选第一个元素。
这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的从最基础的HTML+CSS+JS炫酷特效,游戏,插件封装,设计模式到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2020最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!
学习前端,我们是认真的