css属性 :nth-of-type() 的使用

本文主要是介绍css属性 :nth-of-type() 的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：
要实现如下的列表效果，重点是左边

刚开始的思路是用 flex布局然后使用 justify-content: space-between;这个属性来解决，但是因为列表的数据不是固定的，如果列表的数据最后一行是两个时候就会是下面这种效果了

解决办法：去掉justify-content: space-between; 将图片的宽度设置成屏幕的三分之一，然后设置 border: 1px solid #fff; 这样会出现一个问题就是右边的图片会有留白，所以就要用到这个函数来解决 代码如下

.grid-container {display: flex;flex-wrap: wrap;flex-direction: row;border-top: 1px solid #fff;
}.grid-container .grid-item {display: flex;width: 33.3%;flex-direction: column;box-sizing: border-box;border: 1px solid #fff;border-top: none;border-left: none;
}
.grid-item:nth-of-type(3n) {border-right: none;
}

意思就是当这个图片是3的倍数的时候，让右边框取消，这样就解决了上面的问题。

这篇关于css属性 :nth-of-type() 的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---