Question

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

我有N个HTML元素作为同一父级的子元素。元素n和元素n + 1是相邻的兄弟姐妹，如果这很重要......换句话说，N个元素都是相邻的。

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

我似乎无法在选择器中引用CSS变量，例如：nth-child（var（--num）），但仅限于样式。

显然我可以编写javascript来检索--num并循环遍历元素，更改它们的display：setting。但还有更好的东西吗？ CSS中的聪明技巧可以在没有javascript的情况下实现类似的效果吗？

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>

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

2 个答案: