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