在不知道组件数量的情况下粘贴位置的纯 css 堆叠

Question

关于以下内容的扩展问题：

pure CSS multiple stacked position sticky?

有没有办法计算后续标题的顶部位置，以便按照示例堆叠标题。我不知道会有多少标题，所以我不能说：

.headers {position:sticky}
.header-1 {top:0;}
.header-2 {top:1em}
.header-3 {top:2em}
.header-4 {top:3em}

但需要计算差异

HTML：

<div class="container">
     <div class="headers header-1">header 1<div>
     <div class="content">This is the content<div>
     <div class="headers header-2">header 2<div>
     <div class="content">This is the content<div>
     <div class="headers header-3">header 3<div>
     <div class="content">This is the content<div>
     <div class="headers header-4">header 4<div>
     <div class="content">This is the content<div>

随着列表的增长，我需要以某种方式计算 :nth-child 或 :type-of 左右的方法。不确定是否可以在 css 中完成，但想知道是否可能

Answer 1

如果问题是我可以使用nth-child或nth-of-type的n自动计算属性吗？

答案是不，你不能，至少现在是这样。

但有几种解决方法：

---

• 这个不是很优雅，但它实际上是迄今为止使用最多的一个。

.bars span {
  display: block;
  height: 1em;
  margin-bottom: 1em;
  background-color: salmon;
}

.bars span:nth-child(1) {
  width: 1em;
}

.bars span:nth-child(2) {
  width: 2em;
}

.bars span:nth-child(3) {
  width: 3em;
}

.bars span:nth-child(4) {
  width: 4em;
}

// ... and many more

<div class="bars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

如果你使用的是预编译的 css，比如 scss，可以简写为：

@for $i from 1 through 20 {
  .bars span:nth-child(#{$i}) {
    width: #{$i}em;
  }
}

---

• 另一个是使用css变量。但是您必须手动分配变量：

.bars span {
  display: block;
  height: 1em;
  margin-bottom: 1em;
  background-color: salmon;
}

.bars span {
  width: calc(var(--length) * 1em);
}

<div class="bars">
  <span style="--length: 1;"></span>
  <span style="--length: 2;"></span>
  <span style="--length: 3;"></span>
  <span style="--length: 4;"></span>
</div>