Question

假设您有一个响应宽度的容器，其中包含内联块元素。其中一些元素撞到了容器的边缘并掉到了新的线条上。这很棒！ ...除非出于某种原因，您希望仅将样式规则应用于元素的第一行。

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

在上面的小提琴中，比方说，我希望顶部的项目稍暗，或者我想删除上边距。我可以对容器应用负边距，但随后容器移动。这是一个黑客而不是修复。但是我想不出用于改变颜色的CSS解决方案。

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

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

Answer 2

即使CSS具有::first-line伪元素，也无法设置第一行中包含的元素的样式。这是因为包含的元素是容器的子元素，而不是第一行伪元素。

Answer 3

我认为CSS没有任何方法可以检查具有特定位置的元素，所以我最好的CSS解决方案，可以适合您的问题，只是改变部分的背景颜色第一行。例如，取一个空的div元素，将其缩放，使其覆盖整个第一行/行（当然宽度也是响应的）并将其位置固定在第一行之上。现在，您可以简单地使用z-index和背景颜色为第一行制作固定或绝对的彩色底层。

像这样的东西（z-index遗憾地看起来不起作用）：

.container {
  width: 50%;
  background-color: #ababab;
}

.thinger {
  background-color: #666666;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  margin-right: 10px;
  display: inline-block;
  z-index: 2;
}

div.background {
  position: absolute;
  top: 15px;
  left: 8px;
  width: 48%;
  height: 105px;
  background-color: #98bf21;
  z-index: 1;
}

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

PS：你知道如果你把文字放在盒子里移动吗？

是否有CSS方法仅设置第一行包装元素的样式？

3 个答案: