视觉( block 回流)行的第一个元素的 CSS 选择器

Question

block 项的每个可视行的第一个元素是否有一个 CSS 选择器？也就是说，想象一下有 20 个 block 元素，它们跨多行流动以适应它们的父容器；我可以选择每行最左边的元素吗？

通过查看所有元素的顶部位置在 JavaScript 中是可行的，但在纯 CSS 中是否可行？

Answer 1

是的，通过 CSS 是可能的，但前提是您可以修复每一行中的元素。

由于您没有提供案例，这里有一个例子。

假设，您的元素以 ul 和 li 模式堆叠，并且是连续的三个列表，那么您可以使用以下 css 片段。

li:first-child, li:nth-child(3n+1) {
    background: red;
}

Demo