是否有更好或更有效的方法来实现这一目标?
我基本上是想在每行中选择第一项以删除其边距,在我的示例中以青色标记。我有一点点技巧,但是此内容是动态的,因此不会长期有效。
我以为使用第7个孩子7可以使用,但由于项目数量奇异,所以不可行。好吧,我认为这就是原因。
看看我的笔http://codepen.io/qwerty-design/pen/JGmYwo
任何提示,不胜感激。
.brochure-download-thumbs li:nth-child(6n) {
margin-right: 0;
background: pink;
}
.brochure-download-thumbs li:first-child {
background: red;
margin-left: 0;
}
.brochure-download-thumbs li:nth-child(7),
.brochure-download-thumbs li:nth-child(13),
.brochure-download-thumbs li:nth-child(19),
.brochure-download-thumbs li:nth-child(25) {
margin-left: 0;
background: teal;
}
HTML只是一个简单的无序列表。
最佳答案
您可以将6n+7
用作:nth-child
的参数,而不是分别选择第7、13、19、25个元素。
.brochure-download-thumbs li:nth-child(6n+7) {
margin-left: 0;
background: teal;
}
body {
font-family: sans-serif;
color: #333;
}
.brochure-download-thumbs {
width: 965px;
background: #eee;
}
.brochure-download-thumbs li {
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0 10px 30px 10px;
}
.brochure-download-thumbs li img {
border: 6px solid #1db4d3;
}
.brochure-download-thumbs li a {
color: #333;
text-decoration: none;
}
.brochure-download-thumbs li:nth-child(6n) {
margin-right: 0;
background: pink;
}
.brochure-download-thumbs li:first-child {
background: red;
margin-left: 0;
}
.brochure-download-thumbs li:nth-child(6n+7) {
margin-left: 0;
background: teal;
}
<h1 class="sectionTitle">Mono Machines</h1>
<ul class="brochure-download-thumbs">
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
</ul>
<h1 class="sectionTitle">Colour Machines</h1>
<ul class="brochure-download-thumbs">
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
<li>
<a href="#">
<img src="http://abs-ics.co.uk/assets/brochure-thumbs/mono/227.jpg" alt="ineo 227 Brochure" />
</a>
<a href="#">
<p>Ineo 227</p>
</a>
</li>
</ul>
如果您还希望选择第一个元素,那么我们可以使用
6n+1
,但是由于您只希望选择第7个以后的元素,因此可以选择6n+7
。这实际上取决于您要选择的元素。如果第一个元素也需要与第7个,第13个等相同的设置,那么最好使用6n+1
。