html - 基于父类中的数字样式 N 元素

Question

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

希望从 colHead 的每个实例中计数，并将负边距应用于以下 2 个 colSpan1 项目。这在第一个上效果很好，但在后面的任何一个都被忽略了。

有没有办法从每个 colHead 计数，而不管它们出现在容器中的什么位置？

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

可以通过以下方式做到这一点，但它有点混乱（特别是在引入更多列时）并且希望有一种更清洁的方式：

.colCount2 .colHead + .colSpan1, .colCount2 .colHead + .colSpan1 + .colSpan1 { 边距顶部：-2em; }

谢谢你的时间。

[class^="colCount"] { display: grid; grid-gap: 2em; grid-template-columns: repeat(12, 1fr); width: 90%; margin: 0 auto; }
.colCount2 .colHead { grid-column: span 12; }
.colCount2 .colHead ~ .colSpan1:nth-of-type(-n+2) { margin-top: -2em; }
.colCount2 .colSpan1 { grid-column: span 6; }

<div class="colCount2">
    <span class="colHead">
        <h2>Two Columns (colCount2)</h2>
    </span>
    <div class="colSpan1">
        <p><strong>colSpan1</strong> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam aliquam sapien, non auctor orci iaculis sit amet.</p>
    </div>
    <div class="colSpan1">
        <p><strong>colSpan1</strong> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam aliquam sapien, non auctor orci iaculis sit amet.</p>
    </div>
    <div class="colSpan1">
        <p><strong>colSpan1</strong> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam aliquam sapien, non auctor orci iaculis sit amet.</p>
    </div>
    <span class="colHead">
        <h2>Two Columns (colCount2)</h2>
    </span>
    <div class="colSpan1">
        <p><strong>colSpan1</strong> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam aliquam sapien, non auctor orci iaculis sit amet.</p>
    </div>
    <div class="colSpan1">
        <p><strong>colSpan1</strong> <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquam aliquam sapien, non auctor orci iaculis sit amet.</p>
    </div>
</div>

标签： htmlcss

Answer 1

这听起来像是使用 CSS 预处理器高效编写这些规则的好案例。我不确定我是否正确推断了您想要的网格系统，但是使用SCSS，您可以编写以下内容-</p>

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

—编译为—</p>

.colCount2 .colHead + .colSpan1 {
  grid-column: span 6;
}
.colCount2 .colHead + .colSpan1 + .colSpan1 {
  grid-column: span 6;
}

.colCount3 .colHead + .colSpan1 {
  grid-column: span 4;
}
.colCount3 .colHead + .colSpan1 + .colSpan1 {
  grid-column: span 4;
}
.colCount3 .colHead + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 4;
}

.colCount4 .colHead + .colSpan1 {
  grid-column: span 3;
}
.colCount4 .colHead + .colSpan1 + .colSpan1 {
  grid-column: span 3;
}
.colCount4 .colHead + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 3;
}
.colCount4 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 3;
}

.colCount6 .colHead + .colSpan1 {
  grid-column: span 2;
}
.colCount6 .colHead + .colSpan1 + .colSpan1 {
  grid-column: span 2;
}
.colCount6 .colHead + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 2;
}
.colCount6 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 2;
}
.colCount6 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 2;
}
.colCount6 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 2;
}

.colCount12 .colHead + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}
.colCount12 .colHead + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 + .colSpan1 {
  grid-column: span 1;
}