选择 CSS 中的前三个元素并重复答案

【问题标题】：Select the first three elements in CSS and repeat选择 CSS 中的前三个元素并重复
【发布时间】：2016-05-09 18:00:51
【问题描述】：

我有一张 N 卡的列表，浮动的，带有width:33.3333%。当用户点击一张卡片时，它会旋转并展开。

但是，我希望从 1:st 开始的每 3:rd 卡都有一定的margin，从 2:nd 开始的每 3:rd 卡都有另一个 margin 并且每 3:rd 从3：又一个margin。

有没有办法用 CSS 选择器来做到这一点，例如子选择器？

Plunker demo

例子：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body class="landing">
    <section id="intro">
      <div class="inner">
        <h2>Title</h2>
        <!-- Cards -->
        <div class="cards">
          <div class="riga">
            <div class="r2">
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb2.png" />
                      </div>
                      <div class="user">
                        <img src="img/img1.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                    Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb.png" />
                      </div>
                      <div class="user">
                        <img src="img/img2.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                   Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb2.png" />
                      </div>
                      <div class="user">
                        <img src="img/img3.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                    Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end inner -->
    </section>
  </body>

</html>

【问题讨论】：

你能展示一些相同的 HTML 代码示例吗？
您的问题在 处不清楚“我希望第一张背卡有一定的边距，第二张有边距，第三张有边距。然后对每一行重复。”。请澄清一下？
那么你需要用这个做什么？
对于每张卡片，当它旋转时，都有一个特定的边距。特别是左边的卡片有 X 边距，中间的卡片有 Y 边距，右边的汽车有 Z 边距

标签： html css css-selectors css-transitions

【解决方案1】：

你可以使用 CSS :nth-child()

span {
  float: left;
  color: white;
  text-align: center;
  margin-top: 5px;
  width: calc(33% - 60px);
}

span:nth-child(3n+1) {
  background-color: green;
  margin-left: 20px;
}
span:nth-child(3n+2) {
  background-color: red;
  margin-left: 40px;
}
span:nth-child(3n+3) {
  background-color: blue;
  margin-left: 60px;
}

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>

【讨论】：

嘿伙计，这真的回答了这个问题吗？
@PraveenKumar 嘿，伙计，如果我理解 OP 正确，是的，如果没有，我会在知道时将其删除......或者让它工作:)
是的，我的意思是这个，但我不知道为什么在我的示例 (plnkr.co/edit/xU8AUmlE6S0foLhZqwrJ?p=preview) 中它不起作用。如果单击并旋转卡片，您可以看到浏览器在 .back 类上只识别 :nth-child(3n+2)
我应该改用什么？
呃，还不行。我究竟做错了什么？ plnkr.co/edit/xU8AUmlE6S0foLhZqwrJ?p=preview

【解决方案2】：

是的，你可能可以。

试试这个：

.yourclass:nth-child(3n+1){
  //child 1, 4, 7....
  margin-left:10px;
}
.yourclass:nth-child(3n+2){
   //child 2,5,8....
   margin-left:20px;
 }
.yourclass:nth-child(3n+3){
    //child 3,6,9....
    margin-left:30px;
 }

【讨论】：

【解决方案3】：

假设你有以下 HTML 和 CSS，你会得到你想要的：

/* Global Setting for columns */
.col {
    float: left;
    text-align: center;
}

/* Different margin for columns. */
.col:nth-child(3n-2) {
	background-color: red;
    clear: left;

    border: 1px solid #000;
    margin: 0 7.5px;
    width: calc(33.33333333% - 2px - 15px); /* size + border + margin */
}
.col:nth-child(3n-1) {
	background-color: green;

    border: 1px solid #000;
    margin: 0 15px;
    width: calc(33.33333333% - 2px - 30px); /* size + border + margin */
}
.col:nth-child(3n) {
	background-color: blue;

    border: 1px solid #000;
    border-left: 0;
    border-right: 0;
    width: 33.33333333%; /* Only size */
}

<div class="container">
	<div class="row">
		<div class="col">1</div>
		<div class="col">2</div>
		<div class="col">3<br>3</div>
		<div class="col">1</div>
		<div class="col">2<br>2</div>
		<div class="col">3</div>
		<div class="col">1<br>1</div>
		<div class="col">2</div>
		<div class="col">3</div>
		<div class="col">1</div>
		<div class="col">2</div>
		<div class="col">3</div>
	</div>
</div>

【讨论】：

问题依旧：看其他答案的cmets。如果我尝试输入您的代码，它会给我同样的错误：所有卡的类 .back 仍然是 (4n-2)
如果没有您的问题的 HTML/CSS 示例，我无法提供更多帮助。