视觉（块重排）行的第一个元素的 CSS 选择器答案

【问题标题】：CSS selector for first element of visual (block reflow) row视觉（块重排）行的第一个元素的 CSS 选择器
【发布时间】：2012-08-08 19:53:02
【问题描述】：

每个可视行的块项目的第一个元素是否有一个 CSS 选择器？也就是说，假设有 20 个块元素，它们跨越多行以适合其父容器；我可以选择每行最左边的项目吗？

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

【问题讨论】：

标签： css layout css-selectors

【解决方案1】：

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

由于你没有提供你的案例，这里是一个例子。

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

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

Demo

【讨论】：

+1，但是这将在没有固定宽度的布局上失败。您可能会投入媒体查询宽度嗅探以针对不同的:nth-child(Xn+1) 乘数。
我对上周提出的相关问题的类似答案发表了评论......再也找不到了。基本上是什么@o.v。刚说。正如您在回答中提到的那样，需要注意的是布局必须是固定的。
@o.v.是的，但仍然必须固定每个块的宽度。
我将不得不使用 JavaScript，但我喜欢这个想法 + o.v. 使用媒体查询的绝佳建议。
提供的解决方案适用于 3 列的行。如果有人需要为 2 列调整它，修复很简单。为此，只需将 li:nth-child(3n+1) 替换为 li:nth-child(2n+1) 即可：)

【解决方案2】：

不，没有选择器，您需要使用 JavaScript。

作为参考，下面是 CSS 选择器的一个很好的参考： http://www.w3.org/wiki/CSS/Selectors

【讨论】：

为什么这被否决了？ +1 因为没有选择器并且你将需要使用JavaScript或其他一些解决方法跨度>

【解决方案3】：

不幸的是，这仅靠 CSS 是不可能的。当我想确保每行上最左边的浮动元素始终从新行开始时，我遇到了这个问题。

我知道您正在寻找 CSS 解决方案，但我编写了这个 jQuery 插件，它识别每个可视行上的第一个元素 并对其应用“clear:left”（您可以对其进行调整）任何东西）。

(function($) {

    $.fn.reflow = function(sel, dir) {

        var direction = dir || 'both';
        //For each conatiner
        return this.each(function() {
            var $self = $(this);

            //Find select children and reset clears
            var $elems = sel ? $self.find(sel) : $self.children();
            $elems.css('clear', 'none');
            if ($elems.length < 2) { return; }

            //Reference first child 
            var $prev = $elems.eq(0);

            //Compare each child to its previous sibling 
            $elems.slice(1).each(function() {
              var $elem = $(this);
              //Clear if first on visual row
              if ($elem.position().top > $prev.position().top) {
                $elem.css('clear', direction);
              }
              //Move on to next child
              $prev = $elem;
            });
        });
    };

})(jQuery);

查看此代码笔示例http://codepen.io/lukejacksonn/pen/EplyL

【讨论】：

感谢@lukejacksonn，很棒的功能！
谢谢@josantgv，我在 2013 年写了这篇文章。很高兴它仍然有帮助。你现在可以使用 flexbox 实现类似的效果，这里是一个例子codepen.io/lukejacksonn/full/MwKOKR

【解决方案4】：

基于@lukejacksonn 的工作

这个在窗口调整大小时添加或删除一个类。

(function ($) {
  $.fn.reflow = function (sel, className) {
    if (className == null) throw new Error('className must be set');
    //For each conatiner
    return this.each(function () {
      var $self = $(this);

      //Find select children and reset clears
      var $elems = sel ? $self.find(sel) : $self.children();
      if ($elems.length < 2) {
        return;
      }

      //Reference first child 
      var $prev = $elems.eq(0);

      $elems.each(function () {
        $(this).removeClass(className);
      });

      //Compare each child to its previous sibling 
      $elems.slice(1).each(function () {
        var $elem = $(this);
        //Clear if first on visual row
        if ($elem.position().top > $prev.position().top) {
          $elem.addClass(className);
        }
        //Move on to next child
        $prev = $elem;
      });
    });
  };


  const markFirstRowElement = function () {
    $(".cd-progress-indicator").reflow('li', 'first-row-element');
  }
  $(function () {
    markFirstRowElement();
    $(window).resize(markFirstRowElement);
  });
})(jQuery);

【讨论】：