有没有一种CSS方法仅样式化换行后的第一行元素？

Question

有没有一种CSS方法仅样式化换行后的第一行元素？

4

假设您拥有一个自适应宽度的容器，其中包含许多内联块级元素。其中一些元素触及容器边缘并且跨行显示，这很好！但是如果您想仅将样式规则应用于这些元素的首行，则不太方便。

请参考此链接示例：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;
}

在上面的示例中，举个例子，如果我想让顶部行的项目略微变暗，或者我想要去掉顶部边距。我可以给容器应用负边距，但这样容器就会移动。这是一种hack而不是解决方法。我无法想到一个CSS解决方案来改变颜色。文本有一个解决方案，使用::first-line伪类选择器。是否有类似于内联块的方法？

- Pixeltramp

2

不行，你需要编写脚本。 - isherwood

除非您覆盖了一个略微较暗的透明色彩来操纵其下方的内容。 - ThisClark

没错。也许值得发布为答案。 - isherwood

虽然从技术上讲它不是只使用CSS。它需要更多的标记。 - isherwood

1

如果您知道第一行的元素的最大和最小数量，并且这些元素具有固定的宽度，那么您可以使用媒体查询来仅针对第一行进行目标定位。 - Asons

显示剩余8条评论

3个回答

2

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

- c-smile

0

我认为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>

提示：你知道如果在文本框中输入文字，它们会移动吗？

- Chaphasilor

一个额外的div或伪元素确实是一个好主意，但在我看来并不可靠：例如使用伪元素（而不是额外的div）和混合模式..http://codepen.io/anon/pen/vLYWrz - G-Cyrillus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rick Hitchcock · Accepted Answer

这里提供一种使用现有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