有没有办法在 :nth-child(n) 中使用“n”值？答案

【问题标题】：Is there a way to use the "n" value in :nth-child(n)?有没有办法在 :nth-child(n) 中使用“n”值？
【发布时间】：2022-01-02 20:27:34
【问题描述】：

我想创建一个折叠效果。

Fiddle

有4张蓝卡，所以我创建了4个类来设置位置。我想让它更智能，以防有超过 4 张卡。在 CSS 中，我试过这个。

.card:nth-child(n){
    position: absolute;
    left: calc(n*10)px;
    top: calc(n*10)px;
}

但是，它不起作用。有没有办法做到这一点？

【问题讨论】：

CSS 做不到。使用像 SCSS/SASS/LESS 这样的框架。
JavaScript 可能是替代品
Here 是执行此操作的 JavaScript 代码。
使用更少的codepen.io/anon/pen/ZYKzPq

标签： html css css-selectors

【解决方案1】：

CSS 不支持变量。您可以使用 Less/SASS 循环并将其定义为 n 达到某个值，但这会多次输出几乎相同的 CSS。这是Codepen 的例子。

SCSS 代码最多支持 10 个卡：

$n: 10;

@for $i from 1 through $n {
  .card:nth-child(#{$i}) {
    position: absolute;
    left: 10px * $i;
    top: 10px * $i;
  }
}

但是你确定你的方法是正确的吗？也许您想退后一步，寻找不同的方法。因为这仍然不能动态扩展，所以您必须预测或限制 n 到某个值。如果你选择大的 n，它会导致一个大的 CSS 文件，这等于更长的加载时间。

【讨论】：

谢谢，我会接受的。我只是谷歌它，我会尝试使用 LESS
感谢您指出@Nicicalu。我已将链接修复为现在指向 codepen 示例。出于某种原因，@for 在 JSFiddle 上不起作用。遗憾的是，stackoverflow sn-ps 不支持 SCSS。
@Marko Gresak 感谢您的快速回复！祝你度过愉快的一周

【解决方案2】：

要在 CSS 中保留计算，您可以使用 CSS 变量：calc( var(--n) * 10px );。您仍然需要通过 JS 手动定义 --n 或通过在 HTML 中预定义它，但这种方式感觉更具声明性，因为没有实际的样式使它成为 JS 代码：

function add() {
  var parent = document.querySelector('.container');
  var child = document.createElement('div');
  child.classList.add('child');
  child.style.setProperty('--n', parent.children.length);
  parent.appendChild(child);
}

.child {
  position: absolute;
  left: calc( var(--n) * 30px + 100px );
  top: calc( var(--n) * 30px );
  background-color: red;
  width: 30px;
  height: 30px;
}

<button onclick="add()">Add more</button>
<div class="container">
  <div class="child" style="--n: 0;"></div>
  <div class="child" style="--n: 1;"></div>
  <div class="child" style="--n: 2;"></div>
</div>

浏览器support 相当不错：现在每个主流浏览器都有它。

【讨论】：

【解决方案3】：

用 JavaScript 试试这个方法

var cards = document.getElementsByClassName('card');

for(i = 0; i < cards.length; i++) {
    cards[i].style.position = 'absolute';
    cards[i].style.left = String(i * 10) + 'px';
    cards[i].style.top = String(i * 10) + 'px';
}

.card{
    opacity:0.5;
    float:left;
    position:absolute;
    background-color:blue;
    border:1px solid red;
    width:40px;
    height:60px;
}

<div class="holder">
    <div class="card card1" ></div>
    <div class="card card2" ></div>
    <div class="card card3" ></div>
    <div class="card card4" ></div>
</div>

【讨论】：

【解决方案4】：

不完全知道它会做什么，但你可以通过嵌套 div 来达到相同的效果

.card {
    position:absolute;
    background-color: rgba(0,0,255,0.5);
    border:1px solid red;
    width:40px;
    height:60px;
}
.card > .card {
    position:absolute;
    left:10px;
    top:10px;
}

    <div class="holder">
        <div class="card card1" >
            <div class="card card2">  
                <div class="card card3" >
                    <div class="card card4" >
                    </div>
            </div>
        </div>
    </div>
 </div>

http://jsfiddle.net/xmj5u2Lg/7/

【讨论】：

移除card1，您就移除了所有卡片。我怀疑这是一个理想的功能。
嗯，问题是我不知道他会用它做什么。制作动画可能很困难，但至于图形效果，我想它尽可能简单。随着甲板大小的增加，它稍后会在 html 中变得混乱，但只要 .card 在另一个 .card 内，它就应该“工作”
我同意这一点，如果不详细说明 OP 想要实现的目标，很难找出正确的方法。

【解决方案5】：

您可以尝试使用 CSS 自定义属性和一点 sn-p：

:root {
  --index: 0;
}

*:nth-child(1) {
  --index: 0;
}

*:nth-child(2) {
  --index: 1;
}

*:nth-child(3) {
  --index: 2;
}

你声明一次，你可能期望拥有的孩子的数量，然后像这样使用：

.child {
  position: absolute;
  top: calc(100px * var(--index));
}

演示： https://codepen.io/waterplea/pen/KKNqqQy

【讨论】：

【解决方案6】：

可以使用 HTML 和 JavaScript 设置 CSS 变量：

<style>
.card:nth-child(n){
    position: absolute;
    left: calc(var(--index)*10px);
    top: calc(var(--index)*10px);
}
</style>

<div class="card" style="--index: 0"></div>
<div class="card" style="--index: 1"></div>

更新 @Kenneth 建议将 px 移到计算中

【讨论】：

"px" 应该移动到计算中