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

Question

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

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

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

我似乎无法在选择器中引用 CSS 变量，例如 :nth-child( var( --num )) 但只能在样式中引用。

显然我可以编写 javascript 来检索 --num 并遍历元素，更改它们的显示：设置。但是有更好的东西吗？ CSS 中的巧妙技巧可以在没有 javascript?

的情况下实现类似的效果

Answer 1

好吧，就像一个没有太多实际用途的练习......

可以让您的请求使用您的变量计算不透明度

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

Answer 2

我喜欢@Vals 的回答，所以这是 height/width 的另一个想法：

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

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

How to show variable number of elements based on CSS variable value

css

css-variables