rd

rd

关注
发信
关注(28)粉丝(399)

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

本文介绍了选择CSS中的前三个元素并重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个N卡的列表，浮动， width：33.3333％。当用户点击卡片时，它会旋转和展开。



但是，我希望每3张卡从1：st开始有一定的 margin ，每3：rd卡从2开始：另一个 margin ，每3：rd从3：rd另一个 margin 。



有没有办法用 CSS 选择器，例如子选择器？



示例：

 <！DOCTYPE html& 
< html> 
 
< head> 
< script data-require =jquery @ *data-semver =2.1.4src =https://code.jquery.com/jquery-2.1.4.js> / script> 
< link href =style.css =stylesheet/> 
< script src =script.js>< / script> 
< / head> 
 
< body class =landing> 
< section id =intro> 
< div class =inner> 
< h2>标题< / 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.pngclass =img-circle/> 
< / div> 
< div class =content> 
< div class =main> 
< h3 class =name>文本< / h3> 
< p class =profession>文字< / p> 
< a onclick =rotateCard（this）.disable（）; class =actions button rimmedhref =＃>文字< / a> 
< a onclick =rotateCard（this）.disable（）; class =actions button rimmedhref =＃>文字< / a> 
< / div> 
< div class =footer> 
< button class =btn btn-simple> 
 Info 
< / button> 
< / div> 
< / div> 
< / div> 
< div class =back> 
< div class =header> 
< h5 class =motto>文字< / h5> 
< / div> 
< div class =content> 
< div class =main> 
< h4 class =text-center>信息< / h4> 
< / div> 
< / div> 
< div class =footer> 
< button class =btn btn-simple> 
返回
< / 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.pngclass =img-circle/> 
< / div> 
< div class =content> 
< div class =main> 
< h3 class =name>文字< / h3> 
< p class =profession>文字< / p> 
< a onclick =rotateCard（this）.disable（）; class =actions button rimmedhref =＃>文字< / a> 
< a onclick =rotateCard（this）.disable（）; class =actions button rimmedhref =＃>文字< / a> 
< / div> 
< div class =footer> 
< button class =btn btn-simple> 
 Info 
< / button> 
< / div> 
< / div> 
< / div> 
< div class =back> 
< div class =header> 
< h5 class =motto>文字< / h5> 
< / div> 
< div class =content> 
< div class =main> 
< h4 class =text-center>信息< / h4> 
< / div> 
< / div> 
< div class =footer> 
< button class =btn btn-simple> 
返回
< / 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.pngclass =img-circle/> 
< / div> 
< div class =content> 
< div class =main> 
< h3 class =name>文字< / h3> 
< p class =profession>文字< / p> 
< a onclick =rotateCard（this）.disable（）; class =actions button rimmedhref =＃>文字< / a> 
< a onclick =rotateCard（this）.disable（）; class =actions button rimmedhref =＃>文字< / a> 
< / div> 
< div class =footer> 
< button class =btn btn-simple> 
 Info 
< / button> 
< / div> 
< / div> 
< / div> 
< div class =back> 
< div class =header> 
< h5 class =motto>文字< / h5> 
< / div> 
< div class =content> 
< div class =main> 
< h4 class =text-center>信息< / h4> 
< / div> 
< / div> 
< div class =footer> 
< button class =btn btn-simple> 
返回
< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
<！ -  end inner  - > 
< / section> 
< / body> 
 
< / html>


解决方案

您可以使用CSS ： nth-child（） 



  span {float：left;颜色：白色; 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> 7< / span>< span> 8< / span>


I have a list of N cards, floated, with width:33.3333%. When the user clicks on a card, it rotate and expands.

However, I would like that every 3:rd card started from the 1:st had a certain margin, every 3:rd card started from the 2:nd another margin and every 3:rd started from the 3:rd yet another margin.

Is there a way to do this with CSS selectors, for example child selector?

Plunker demo

Example:

<!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>
解决方案

You can use 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>

这篇关于选择CSS中的前三个元素并重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-27 07:50
Powered by LMLPHP ©2024 rd 0.004673