Html 是否有一种CSS方法可以仅为第一行包装元素设置样式？

假设您有一个充满内联块元素的响应宽度容器。其中一些元素击中容器的边缘，并落在新的线条上。这太棒了。。。除非出于某种原因，您希望仅将样式规则应用于元素的第一行

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解决方案来改变颜色

---

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

即使CSS也有

：：first-line

伪元素您不能为第一行中包含的元素设置样式。这是因为包含的元素是容器的子元素，而不是第一行的伪元素。

我认为CSS无法检查具有特定位置的元素，因此我最好的CSS解决方案，可能适合您的问题，就是更改第一行部分的背景色。例如，以一个空div元素为例，将其放大，使其覆盖整个第一行/行（当然，宽度也是响应的），并将其位置固定在第一行上方。 现在，您可以简单地使用z索引和背景色为第一行创建固定或绝对彩色的参考底图

类似这样的东西（令人遗憾的是，z指数似乎不起作用）：

.container{
宽度：50%；
背景色：#阿巴巴；
}
thinger先生{
背景色：#666666；
宽度：100px；
高度：100px；
边缘顶部：10px；
右边距：10px；
显示：内联块；
z指数：2；
}
部门背景{
位置：绝对位置；
顶部：15px；
左：8px；
宽度：48%；
高度：105px；
背景色：#98bf21；
z指数：1；
}

---

下面是一个使用现有HTML的解决方案

它将默认背景颜色移动到

：伪元素之前，将第一行的背景移动到
：：伪元素之后

有关说明，请参见代码注释

.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 */
}

不需要。您需要编写脚本。。。。除非你覆盖了一个透明的稍暗的颜色来操纵下面的任何东西，否则这将有效地禁用块中的任何链接和其他功能。@isherwood:不一定，
指针事件
可以防止这种情况发生（如果浏览器支持，但它比仅使用脚本更复杂）。如果您知道第1行元素的最大和最小数量，并且元素的宽度是固定的，则可以使用媒体查询仅针对第一行。额外的div或pseudo确实是一个想法，但在我看来并不可靠：例如使用pseudo（而不是您的额外div）和混合混合模式..聪明，但可能值得一提的是该方法的局限性，例如半透明背景色将无法按预期工作：
.thinger:：after{background:rgba（255,0,0.25）；}
。但变化多端的Thinger等都有其优点。我的方法显然要求
.thinger
s的大小相同，但我没有考虑半透明度问题。
.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 */
}