Question

我目前正在使用分页照片库。它显示主图像以及缩略图列表，如下所示：

+----------------------+----+----+----+---+----+
|                      |  1 |  2 |  3 | 4 |  5 |
+                      +----+----+----+---+----+
|      MAIN IMAGE      |  6 |  7 |  8 | 9 | 10 |
+                      +----+----+----+---+----+
|                      | 11 | 12 | 13 | < |  > |
+----------------------+----+----+----+---+----+

请注意缩略图容器中的数字是分配给每个图像的数字，而不是容器中的实际位置。

缩略图我将它们放在列表容器中，因此使用ul > li选择器定位它们。

所以，我的问题是我需要为包含我的图像的列表项提供不同的边距，具体取决于其容器中的位置，例如：

图片1,6和11

margin-left: 0px

margin-right: 0px用于图像5,10和＆gt;第15位的角色

所以，通过使用：nth-child选择器，我能够做我需要的一部分，就像这样：

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，然后分别定位我的分页链接，但我无法找到这样做的方式，在这里＆＃ 39;到目前为止我尝试过的事情：

:nth-child(13n):nth-child(5n+1)
:nth-child(13n+1):nth-child(5n+1)
:nth-child(5n+1):nth-child(13n+1)

我想我的想法可以解释为＆＃34;定位从第1项开始的每五个项目，然后是从项目5开始的每五个项目，并在13个项目的范围内重复相同的计算（1-13,14 -26,27-39，等等）＆＃34;

任何人都知道如何实现这一目标？

由于

**更新解决方案**

感谢@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

在这里：

＆＃13;

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();
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

以下是使用:nth-child

的纯CSS解决方案

您拥有的li元素的每个“块”包含13个元素，因此您可以使用13n+X选择器中的:nth-child。
现在您需要做的是从您获得的13n中减去li个元素的数量。第一个是13n-12（获得1），第二个是13n-7（获得6），最后一个是13n-2（获得11）。

以下是工作版本：

ul {
  width: 115px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  float: left;
  border: 1px solid black;
  list-style: none;
}
ul li:nth-child(13n-12),
ul li:nth-child(13n-7),
ul li:nth-child(13n-2) {
   background: red;
}

<ul>
  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
  <li style="clear: left">14</li><li>15</li><li>16</li><li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li>
  <li style="clear: left">27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li>32</li> <li>33</li> <li>34</li> <li>35</li> <li>36</li> <li>37</li> <li>38</li> <li>39</li>
</ul>

CSS超级高级nth-child选择器？

1 个答案: