Html 基于父类中的数字设置N个元素的样式

我目前正在构建一个仅使用CSS和HTML的网格，但有点不稳定

查看colHead的每个实例的计数，并将负边距应用于以下2个colSpan1项目。这在第一个上非常有效，但在随后的任何一个上都被忽略

是否有一种方法可以从每个colHead计数，而不管它们出现在容器中的什么位置

循环是动态的，因此没有向HTML中添加额外类的选项来实现这一点

可以用以下方法完成，但有点混乱（特别是在引入更多专栏时），希望有更干净的方法：

.colCount2.colHead+.colSpan1.colCount2.colHead+.colSpan1+.colSpan1{页边距顶部：-2em；}

谢谢你抽出时间

[class^=“colCount”]{显示：网格；网格间距：2em；网格模板列：重复（12，1fr）；宽度：90%；边距：0自动；}
.colCount2.colHead{网格列：span 12；}
.colCount2.colHead~.colSpan1:n类型（-n+2）{边距顶部：-2em；}
.colCount2.colSpan1{网格列：span 6；}

两列（colCount2）
科尔斯潘1
洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的职业运动员。不，不，不，不，不，不，不

科尔斯潘1
洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的职业运动员。不，不，不，不，不，不，不

科尔斯潘1
洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的职业运动员。不，不，不，不，不，不，不

两列（colCount2）
科尔斯潘1
洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的职业运动员。不，不，不，不，不，不，不

科尔斯潘1
洛雷姆·伊普苏姆·多洛·希特·阿梅特，一位杰出的职业运动员。不，不，不，不，不，不，不

这听起来像是一个使用CSS预处理器高效编写这些规则的好例子。我不确定我是否正确地推断了您预期的网格系统，但是使用，您可以编写以下内容-

$cols: 2, 3, 4, 6, 12;

@each $col in $cols {
  .colCount#{$col} .colHead {
    $adjascentSelector: '';
    @for $i from 1 through $col {
      $adjascentSelector: $adjascentSelector + ' + .colSpan1';
      & #{$adjascentSelector} {
        grid-column: span (12 / $col);
      }
    }
  }
}

-编译成-

.colCount2.colHead+.colSpan1{
格构柱：跨度6；
}
.colCount2.colHead+.colSpan1+.colSpan1{
格构柱：跨度6；
}
.colCount3.colHead+.colSpan1{
格构柱：跨度4；
}
.colCount3.colHead+.colSpan1+.colSpan1{
格构柱：跨度4；
}
.colCount3.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度4；
}
.colCount4.colHead+.colSpan1{
格构柱：跨度3；
}
.colCount4.colHead+.colSpan1+.colSpan1{
格构柱：跨度3；
}
.colCount4.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度3；
}
.colCount4.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度3；
}
.colCount6.colHead+.colSpan1{
格构柱：跨度2；
}
.colCount6.colHead+.colSpan1+.colSpan1{
格构柱：跨度2；
}
.colCount6.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度2；
}
.colCount6.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度2；
}
.colCount6.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度2；
}
.colCount6.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度2；
}
.colCount12.colHead+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1{
格构柱：跨度1；
}
.colCount12.colHead+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+.colSpan1+{
格构柱：跨度1；
}

不幸的是，手动添加类不是一个选项，应该解释一下。将把这些信息添加到帖子中，谢谢。@Barry我已经根据您的评论和修改更新了我的答案。谢谢您的更新–这是另一个有助于说服老板开始使用CSS预处理器的原因。我猜CSS中没有选择器的组合（除了手动执行上述操作）来实现这一点吗？@Barry我不知道