选择CSS中的前三个元素并重复 [英] Select the first three elements in CSS and repeat
本文介绍了选择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?
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中的前三个元素并重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
