如何根据 CSS 变量值显示可变数量的元素
How to show variable number of elements based on CSS variable value
我有一个 CSS 变量 --num 包含一个数字。
我有 N HTML 个元素作为同一个父元素的子元素。元素 n 和元素 n+1 是相邻的兄弟,如果这很重要......换句话说,N 个元素都是相邻的。
当且仅当 n 小于 --num 的值时,我如何显示该 N 个元素集合中的第 n 个元素?
我似乎无法在选择器中引用 CSS 变量,例如 :nth-child( var( --num )) 但只能在样式中引用。
显然我可以编写 javascript 来检索 --num 并遍历元素,更改它们的显示:设置。但是有更好的东西吗? CSS 中的巧妙技巧可以在没有 javascript?
的情况下实现类似的效果
好吧,就像一个没有太多实际用途的练习......
可以让您的请求使用您的变量计算不透明度
.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>
我喜欢@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 变量 --num 包含一个数字。
我有 N HTML 个元素作为同一个父元素的子元素。元素 n 和元素 n+1 是相邻的兄弟,如果这很重要......换句话说,N 个元素都是相邻的。
当且仅当 n 小于 --num 的值时,我如何显示该 N 个元素集合中的第 n 个元素?
我似乎无法在选择器中引用 CSS 变量,例如 :nth-child( var( --num )) 但只能在样式中引用。
显然我可以编写 javascript 来检索 --num 并遍历元素,更改它们的显示:设置。但是有更好的东西吗? CSS 中的巧妙技巧可以在没有 javascript?
的情况下实现类似的效果好吧,就像一个没有太多实际用途的练习......
可以让您的请求使用您的变量计算不透明度
.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>
我喜欢@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>