css-selectors - 换行符的 CSS 选择器

Question

假设我有几个相邻的元素:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

样式如下:

.container > div {
  display:inline-block;
  white-space:nowrap;
}

由于我们使用的是 display:inline-block，因此 div 将作为内联元素流动。我想做的是能够指定一个 CSS 规则，该规则应当兄弟 div 位于同一行时(即没有行插入中间的中断)。

举个例子，假设上面的 div 布局如下图所示:

[ 1 ][ 2 ][ 3 ][ 4 ]
[ 5 ][ 6 ] 

我想编写一个 CSS 规则来匹配元素 2、3、4 和 6(即 div 和同级元素位于同一行)或反向集 (元素 1 和 5，即 div，之前没有兄弟元素位于同一行)。

这对于样式化非常有用，例如(假设 ++ 是我正在寻找的选择器)

.container > div ++ .container > div {
  /* separator between elements on the same line */
  border-right:1px solid #000; 
}

Answer 1

CSS 中没有这样的选项，尽管它很有用。您可以通过检索定位数据在 javascript 中检测到它，例如它与文档的 Y 偏移量。当它不同时，您可以添加类名来替代样式。快点 jQuery示例:

var topOffset;
$(document).ready(function(){
    $('.container div').each(function(index){
        if (index === 0) {
          // first item, set offset
          topOffset = $(this).offset().top;
          $(this).addClass('new-row');
        } else if (topOffset < $(this).offset().top){
          // new item, new row

          $(this).addClass('new-row');
          topOffset = $(this).offset().top;
        }
    });
});

这应该导致:

<div class="container">
  <div class="new-row">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="new-row">5</div>
  <div>6</div>
</div>

这可以使用类选择器适本地设置样式。

编辑 Working example on jsFiddle

注意:不适用于调整大小，但是当您将它移动到一个在窗口调整大小时调用的函数中时，可以解决这个问题。