不知道组件计数的纯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-子方法或:type-of方法。不确定是否可以用css完成，但想知道是否有可能

Answer 1

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

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

但有几种解决办法：

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

​

.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>

​