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

Question

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

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

Answer 1

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

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

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

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

演示

Answer 2

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

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

Answer 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

Answer 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);