html - 是否有一种 CSS 方法可以只设置第一行环绕元素的样式？

Question

假设您有一个响应式宽度的容器，里面装满了行内 block 元素。其中一些元素碰到容器的边缘并掉落到新的行中。这很棒! ...除非出于某种原因您只想将样式规则应用于元素的第一行。

http://jsfiddle.net/nshdnazw/1/

HTML

<div class="container">
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div> 
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
  <div class="thinger"></div>
</div>  

CSS

.container {
  width: 50%;
  background-color: #ababab;
}

.thinger {
  display: inline-block;
  background-color: #666666;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  margin-right: 10px;
}

在上面的 fiddle 中，例如我希望元素的顶行稍微暗一些，或者我想删除顶部边距。我可以对容器应用负边距，但容器会移动。这是一个黑客而不是修复。不过，我想不出用于更改颜色的 CSS 解决方案。

Text 有一个解决方案，使用::first-line 伪选择器。内联 block 有类似的方法吗？

Answer 1

这是一个使用现有 HTML 的解决方案。

它将默认背景颜色移动到 ::before 伪元素，并将第一行的背景移动到 ::after 伪元素。

请参阅代码注释以获取解释。

.container {
  width: 50%;
  background-color: #ababab;
  position: relative;
  z-index: -2;        /* behind pseudo elements */
}

.thinger {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
}

.thinger::before, .thinger::after {
  content: '';
  display: block;
  position: absolute;  /* positioned relative to .container */
  z-index: -1;         /* to prevent covering any text */
  width: 100px;        /* same width as .thinger */
  height: 100px;       /* same height as .thinger */
}

.thinger::before {
  background: #666;    /* default background */
}

.thinger::after {
  top: 10px;           /* top row only  (.thinger's margin-top is 10px.)  */
  background: brown;   /* background of top row only */
}

Fiddle