学习记录2 css选择器:nth-child(n)选择前几个元素
如:在项目中要实现如下效果

在这里插入图片描述
在三列布局中间加边框线,只使用border-right是不行的,三个div都会被选中,因此使用css选择器给前两个div进行添加样式,实现代码如下:

 .totalShow > div:nth-child(-n+2) {
      border-right: 1px solid #E4E7ED;
    }

其中 >大于号代表只选择下一代子元素 (-n+2) 代表选择前两个。

针对nth-child(n) 使用方法的总结:

1、:nth-child(1) 选择第一个子元素
2、:nth-child(-n+2) 选择前两个子元素
3、:nth-child(n+2) 选择后两个子元素
4、:nth-child(2n) 选择列表中为偶数的元素
5、:nth-child(2n-1) 选择列表中为奇数的元素
6、:nth-child(n+6):nth-child(-n+9) 结合使用,选择一列元素中的中间几个
举例为从第六个到第九个

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐