Question

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

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

Answer 1

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

由于您未提供案例，因此这是一个示例。

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

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

Demo

Answer 2

不幸的是，单独使用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 3

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

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

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

用于可视（块重排）行的第一个元素的CSS选择器

4 个答案:

Demo