Question

我想创建折叠效果。

有4张蓝卡，所以我创建了4个类来设置位置。我想让它变得更聪明，万一会有超过4张牌。在CSS中，我试过这个。

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

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

Answer 1

使用JavaScript

尝试此方法

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

不知道该怎么做，但你可以通过嵌套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 3

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

支持最多10张卡的SCSS代码：

$n = 10;

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

但你确定你的方法是正确的吗？也许你想退后一步，寻找不同的方法。由于这仍然无法动态扩展，因此您必须将 n 预测或限制为某个值。如果您选择大型 n ，则会产生较大的CSS文件，这相当于较长的加载时间。

Answer 4

要在CSS中保留计算，可以使用CSS变量：calc( var(--n) * 10px );。您仍然必须通过JS或通过在HTML中预定义--n来手动定义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); }，但是由于没有实际的样式使其成为JS代码，因此这种方式更具声明性：

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

import Cocoa

class Window : NSObject
{

    let width, height : Int
    let title : String
    let size : CGSize
    let rect : NSRect
    let window : NSWindow

    init(width : Int, height: Int, title: String) {
        self.width = width
        self.height = height
        self.title = title
        self.size = CGSize(width: width, height: height)
        self.rect = NSRect(origin: .zero, size: size)
        self.window = NSWindow(contentRect: rect, styleMask: 
        .closable, backing: .buffered, defer: false)
    }

    func createWindow()
    {
        window.title = title
        window.isOpaque = false
        window.center()
        window.isMovableByWindowBackground = true
        window.backgroundColor = NSColor.gray
        window.makeKeyAndOrderFront(window)
    }
}

浏览器support非常不错：如今，每个主流浏览器都具有它。

Answer 5

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

: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

Answer 6

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

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

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

有没有办法在'nth-child（n）中使用“n”值？

6 个答案: