如何根据CSS变量值显示可变数量的元素

Question

我有一个CSS变量 - 包含一个数字。

我作为父母的孩子有N HTML元素。元素n和元素n 1是相邻的兄弟姐妹，如果那很重要……换句话说，n个元素都是相邻的。

当and仅小于-num的值时，我如何显示n个元素集合的元素n？

我似乎无法参考选择器中的CSS变量，例如：nth-child(var(-num((，但仅在样式中。

显然，我可以编写JavaScript来检索 - 并在元素上循环，更改其显示：设置。但是有更好的东西吗？在没有JavaScript的情况下，CSS中的聪明技巧？

Answer 1

我喜欢@Vals的答案，所以这是一个高度/宽度的想法：

.elem {
  display: inline-block;
  max-height: 60px;
  max-width: 60px;
  position: relative;
  background-color: lightblue;
  --number: 2;
}
.test {
  border:1px solid;
  display:inline-block;
  padding:20px;
}
.test:hover .elem {
  --number: 6;
}
.elem:nth-child(1) {
  height: calc(100px * (var(--number)));
  width: calc(100px * (var(--number)))
}
.elem:nth-child(2) {
  height: calc(100px * (var(--number) - 1));
  width: calc(100px * (var(--number) - 1))
}
.elem:nth-child(3) {
  height: calc(100px * (var(--number) - 2));
  width: calc(100px * (var(--number) - 2))
}
.elem:nth-child(4) {
  height: calc(100px * (var(--number) - 3));
  width: calc(100px * (var(--number) - 3))
}
.elem:nth-child(5) {
 height: calc(100px * (var(--number) - 4));
  width: calc(100px * (var(--number) - 4))
}
.elem:nth-child(6) {
  height: calc(100px * (var(--number) - 5));
  width: calc(100px * (var(--number) - 5))
}

<div class="test">
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
</div>

Answer 2

好吧，就像没有太多现实世界使用的练习...

使用变量

获取您的请求计算不透明度的合理性

.elem {
  margin: 10px;
  display: inline-block;
  height: 60px;
  width: 60px;
  position: relative;
  background-color: lightblue;
  --number: 2;
}
.test:hover .elem {
  --number: 5;
}
.elem:nth-child(1) {
  opacity: calc(var(--number));
}
.elem:nth-child(2) {
  opacity: calc(var(--number) - 1);
}
.elem:nth-child(3) {
  opacity: calc(var(--number) - 2);
}
.elem:nth-child(4) {
  opacity: calc(var(--number) - 3);
}
.elem:nth-child(5) {
  opacity: calc(var(--number) - 4);
}
.elem:nth-child(6) {
  opacity: calc(var(--number) - 5);
}

<div class="test">
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
    <div class="elem">
    </div>
</div>