我有一个 N 张牌的列表，浮动，带有width:33.3333% .当用户单击卡片时，卡片会旋转和展开。
但是，我希望从 1：st 开始的
每张 3：rd 卡都有一定的margin，每张 3：rd 卡从 2：nd 开始另一张margin，每张 3：rd 从 3：rd 开始另一margin。有没有办法使用 CSS 选择器（例如子选择器）来做到这一点？
普伦克演示
例：
<!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>
您可以使用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>是的，你可能可以。
试试这个：
.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;
}
假设你有以下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>