有没有办法在 :nth-child(n) 中使用 "n" 值？

Question

我想创建折叠效果。

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

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

但是，它不起作用。有办法吗？

Answer 1

不太清楚要用它做什么，但你可以通过嵌套 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/

Answer 2

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 文件，这等于更长的加载时间。

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

Answer 4

要在 CSS 中保留计算，您可以使用 CSS 个变量：calc( var(--n) * 10px );。您仍然需要通过 JS 或通过在 HTML 中预定义它来手动定义 --n，但这种方式感觉更具声明性，因为没有实际的样式使其成为 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 相当不错：现在每个主流浏览器都有它。

Answer 5

您可以尝试使用 CSS 自定义属性和一个小片段：

:root {
  --index: 0;
}

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

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

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

您声明一次，您可能希望拥有 children 的数量，然后像那样使用：

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

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

Answer 6

CSS 变量可以设置为 HTML 和 JavaScript:

<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 移入计算中

有没有办法在 :nth-child(n) 中使用 "n" 值？

Is there a way to use the "n" value in :nth-child(n)?

html

css

css-selectors