Htmlcss 列表项 区分列表首尾-前端入门

    技术2023-08-19  87

    列表项,有时需要判断列表首尾,来筛选设置样式

    如上图,三个项有间隔,怎么保证设置了列表项之间的距离后,整体还水平居中显示呢?

    .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最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

    学习前端,我们是认真的

    Processed: 0.009, SQL: 9