0
我目前正在与分页照片库。它显示在主图像，也缩略图列表，像这样的东西：CSS超级高级nth-child选择器？
+----------------------+----+----+----+---+----+
| | 1 | 2 | 3 | 4 | 5 |
+ +----+----+----+---+----+
| MAIN IMAGE | 6 | 7 | 8 | 9 | 10 |
+ +----+----+----+---+----+
| | 11 | 12 | 13 | < | > |
+----------------------+----+----+----+---+----+
请注意这些数字在缩略图容器是分配给每个图像的数量，而不是在容器中的实际位置。
缩略图我把它们放在一个列表容器中，所以它们的目标是使用ul > li选择器。
所以，我的问题是，我需要给不同的利润率列表项包含我的图片，这取决于他们的容器中的位置，例如：
margin-left: 0px为图像1，6，和11
margin-right: 0px的图像5，10，并在位置>字符15
所以，我能够做什么，我需要的部分，通过使用：第n个孩子选择，这样的事情：
ul li:nth-child(5n+1) {
margin-left: 0;
}
ul li:nth-child(5n+5) {
margin-right: 0;
}
问题是当我去缩略图的翻页，我<和>链接我要他们从第1页移动到第2页，然后隐藏在第1页所有缩略图显示的那些在第2页，所以选择不再适用......它是复杂的，所以这是更好地展示会是什么样2页所示：
+----------------------+----+----+----+----+----+
| | 14 | 15 | 16 | 17 | 18 |
+ +----+----+----+----+----+
| MAIN IMAGE | 19 | 20 | 21 | 22 | 23 |
+ +----+----+----+----+----+
| | 24 | 25 | 26 | < | > |
+----------------------+----+----+----+----+----+
所以，现在我的选择是行不通的，而不是应用到图像15,20和25为左边距，21,26和>链接为右边距，它们适用于14,19,24一个边距，18,23和另一个为>链接。
我的第一种方法是只瞄准可见项目，但不能通过CSS完成，我真的不想走jQuery之路，除非绝对必要 - 布局应该通过CSS完成，右？
所以，这是，这是我无法弄清楚。
我的一个想法是一次将13个项目的范围内的5n + 1和5n + 5作为目标，然后分别对准我的分页链接，但是我找不到这样做的方式，这是我到目前为止已经试过：
:nth-child(13n):nth-child(5n+1)
:nth-child(13n+1):nth-child(5n+1)
:nth-child(5n+1):nth-child(13n+1)
我想我的想法可以作为“目标每次第五个项目，从项目1开始，然后每第五个项目从第5项开始，并在13个项目范围内重复同样的计算（来解释1-13,14-26,27-39等等）“
任何人都知道我该怎么做到这一点？
感谢
**与溶液**修订
感谢@Dekel指着我在正确的方向。
这是我用来做最后的CSS它的工作
ul li:not(.psr_paging):nth-child(13n-12),
ul li:not(.psr_paging):nth-child(13n-7),
ul li:not(.psr_paging):nth-child(13n-2) {
border-color: cyan;
margin-left: 0;
}
ul li:not(.psr_paging):nth-child(13n-8),
ul li:not(.psr_paging):nth-child(13n-3) {
border-color: blue;
margin-right: 0;
}
#pager-next {
margin-right: 0;
}
和这里的的东西如预期工作的一个工作示例：
在codepen：https://codepen.io/andruxnet/pen/ozvEBW?editors=1111
在这里：
var page = 0;
var numThumbs = 13;
var paging = [
{'start': 1, 'end': 13},
{'start': 14, 'end': 26},
{'start': 27, 'end': 39}
];
function refreshThumbs() {
var startIndex = paging[ page ].start - 1;
var stopIndex = paging[ page ].end - 1;
// Show/Hide thumbs
var $thumbsUl = $('ul.thumbs');
$thumbsUl.find('li:not(.psr_paging)').each(function(i) {
var $li = $(this);
if (i >= startIndex && i <= stopIndex) {
$li.show();
}
else {
$li.hide();
}
});
$('#pager-prev').insertAfter($('ul.thumbs').find('li:visible:not(.psr_paging):last'));
$('#pager-next').insertAfter($('#pager-prev'));
}
$('#pager-next').on('click', function() {
if (page < 2) {
page++;
refreshThumbs();
}
});
$('#pager-prev').on('click', function() {
if (page > 0) {
page--;
refreshThumbs();
}
});.thumbs-wrap {
width: 460px;
height: 360px;
display: block;
background-color: black;
padding: 10px;
}
.thumbs-wrap ul.thumbs {
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.thumbs-wrap ul.thumbs li {
width: 18%;
height: 74px;
margin: 5px;
float: left;
overflow: hidden;
border: 5px solid #ffffff;
font-size: 30px;
color: #ffffff;
text-align: center;
padding-top: 10px;
}
.thumbs-wrap li.thumb-blank {
background-color: red;
}
.thumbs-wrap li.psr_paging a {
font-size: 30px;
text-align: center;
color: #ffffff;
margin: 0 auto;
}
.thumbs-wrap li.psr_paging a:hover {
text-decoration: none;
}
ul li:not(.psr_paging):nth-child(13n-12),
ul li:not(.psr_paging):nth-child(13n-7),
ul li:not(.psr_paging):nth-child(13n-2) {
border-color: cyan;
margin-left: 0;
}
ul li:not(.psr_paging):nth-child(13n-8),
ul li:not(.psr_paging):nth-child(13n-3) {
border-color: blue;
margin-right: 0;
}
#pager-next {
margin-right: 0;
}<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbs-wrap">
<ul class="thumbs">
<li class="thumb-blank">1</li>
<li class="thumb-blank">2</li>
<li class="thumb-blank">3</li>
<li class="thumb-blank">4</li>
<li class="thumb-blank">5</li>
<li class="thumb-blank">6</li>
<li class="thumb-blank">7</li>
<li class="thumb-blank">8</li>
<li class="thumb-blank">9</li>
<li class="thumb-blank">10</li>
<li class="thumb-blank">11</li>
<li class="thumb-blank">12</li>
<li class="thumb-blank">13</li>
<li id="pager-prev" class="psr_paging">
<a class="thumb pageLink prev" href="javascript:void(0);">
<span class="glyphicon glyphicon-menu-left"></span>
</a>
</li>
<li id="pager-next" class="psr_paging">
<a class="thumb pageLink next" href="javascript:void(0);">
<span class="glyphicon glyphicon-menu-right"></span>
</a>
</li>
<li class="thumb-blank" style="display: none;">14</li>
<li class="thumb-blank" style="display: none;">15</li>
<li class="thumb-blank" style="display: none;">16</li>
<li class="thumb-blank" style="display: none;">17</li>
<li class="thumb-blank" style="display: none;">18</li>
<li class="thumb-blank" style="display: none;">19</li>
<li class="thumb-blank" style="display: none;">20</li>
<li class="thumb-blank" style="display: none;">21</li>
<li class="thumb-blank" style="display: none;">22</li>
<li class="thumb-blank" style="display: none;">23</li>
<li class="thumb-blank" style="display: none;">24</li>
<li class="thumb-blank" style="display: none;">25</li>
<li class="thumb-blank" style="display: none;">26</li>
<li class="thumb-blank" style="display: none;">27</li>
<li class="thumb-blank" style="display: none;">28</li>
<li class="thumb-blank" style="display: none;">29</li>
<li class="thumb-blank" style="display: none;">30</li>
<li class="thumb-blank" style="display: none;">31</li>
<li class="thumb-blank" style="display: none;">32</li>
<li class="thumb-blank" style="display: none;">33</li>
<li class="thumb-blank" style="display: none;">34</li>
<li class="thumb-blank" style="display: none;">35</li>
<li class="thumb-blank" style="display: none;">36</li>
<li class="thumb-blank" style="display: none;">37</li>
<li class="thumb-blank" style="display: none;">38</li>
<li class="thumb-blank" style="display: none;">39</li>
</ul>
</div>
你是如何隐藏/显示被点击导航按钮，当要素是什么？ – MJH
你能提供HTML吗？目前还不清楚< and >链接如何在问题的HTML中出现。 – Alohci
我使用$（'ul li'）。each（）循环遍历容器中的列表项，然后我为这些列表容器中的位置在正确的内部执行$（this）.show（）范围，第1页的范围是1-13，第二页是14-26，结束如此 – andrux