如何让每行最后一个元素的样式不一样？浮动或者flex布局，每行排列的个数不确定，根据屏幕宽度适应

Question

如题，子元素的宽高确定，每行排列的个数不确定，根据屏幕宽度适应，用CSS最好，方便的JS也行。
讨论一下，最好能有最简方法，多多指导>_<！

可能是我没说清楚，是每一行

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

类是这种结构，因为li的宽度一定，向左浮动或者flex布局，所以屏幕宽度改变时会换行，每行的最后一个子元素样式不一样，我想了很久好像只能用JS，但是有没有像:last这种简单的css方法？

再补充一下

比如屏幕宽度是500的时候，我每个li宽是100，那么我有10个li，这样有2行，我想第5和第10我它的样式不一样。然后我改变一下屏幕宽度到200，这样就有5行了，我想第2，4，6，8，10个li的样式不一样，就是自动识别出每行最后一个li改变它的样式

Answer 1

css里面没有这么方便的，要用js先判断一行有几个，:nth-child(xn)，得出x，这算是最方便的解了

Answer 2

还是就放个核心代码吧，css没有那种判断，你得根据屏幕的宽度来计算每行的个数0-0

    window.onresize = xx(items)   // item是li的集合,这里面必须要移除上次添加的所有last样式，你自己看着写吧。。
    xx(item)  // 外面还要调用一次初始化
    function xx(items) {
        // 获取屏幕宽度
        var devW = document.documentElement.clientWidth
        
        // 获取每行最后一个item的下标
        var index = Math.floor(devW / 51)  // 50:盒子宽度，1:盒子和盒子间的间隔

        // 判断有几排
        for (let i = 1; i < Math.floor(items.length + 1) / index; i++) {
            // 循环给最后一个盒子添加样式
            $(items).eq((index * i) - 1).addClass('last')
        }
    }

Answer 3

nth-child(3n); 3是每行排几个列。

Answer 4

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。

:nth-child(2n+0)
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。

详见 MDN - css :nth-child()

Answer 5

选择器 ：".parent:last-child"