使用 nth-last-child() 隐藏 will-paginate 的最后一页不起作用

Question

我想隐藏将分页的最后几页，而不是这样：

上一页 | 1 2 .. 5 6 7 .. 30 31 |下一个

看起来像这样：

上一页 | 1 2 .. 5 6 7 .. |下一个

will-paginate生成的html代码如下

<ul class="pagination pagination">
  <li class="prev">
    <a rel="prev" href="/videos?page=5">← Previous</a>
  </li> 
  <li>
    <a rel="start" href="/videos?page=1">1</a>
  </li> 
  <li>
    <a href="/videos?page=2">2</a>
  </li> 
  <li class="disabled">
    <span>…</span>
  </li> 
  <li>
    <a rel="prev" href="/videos?page=5">5</a>
  </li> 
  <li class="active">
    <span>6</span>
  </li> 
  <li>
    <a rel="next" href="/videos?page=7">7</a>
  </li> <li class="disabled">
  <span>…</span>
  </li> 
  <li>
    <a href="/videos?page=30">30</a>
  </li> 
  <li>
    <a href="/videos?page=31">31</a>
  </li> 
  <li class="next">
    <a rel="next" href="/videos?page=7">Next →</a>
  </li>
</ul>

我试图通过以下方式隐藏最后几页 css:

.pagination_links li:nth-last-child(1) {
 display : none !important;
 text-decoration: none !important;
}

.pagination_links li:nth-last-child(2) {
 display : none !important;
 text-decoration: none !important;
}

我还想也许我必须隐藏实际的 href div 而不是 li 所以我也尝试了这个：

.pagination_links li:nth-last-child(1) a {
 display : none !important;
 text-decoration: none !important;
}

.pagination_links li:nth-last-child(2) a {
 display : none !important;
 text-decoration: none !important;
}

仍然没有。有什么想法吗？

Answer 1

您忘记将此 class pagination_links 添加到 ul。

.pagination_links li:nth-last-child(1) {
 display : none !important;
 text-decoration: none !important;
}

.pagination_links li:nth-last-child(2) {
 display : none !important;
 text-decoration: none !important;
}

<ul class="pagination pagination_links">
  <li class="prev">
    <a rel="prev" href="/videos?page=5">← Previous</a>
  </li> 
  <li>
    <a rel="start" href="/videos?page=1">1</a>
  </li> 
  <li>
    <a href="/videos?page=2">2</a>
  </li> 
  <li class="disabled">
    <span>…</span>
  </li> 
  <li>
    <a rel="prev" href="/videos?page=5">5</a>
  </li> 
  <li class="active">
    <span>6</span>
  </li> 
  <li>
    <a rel="next" href="/videos?page=7">7</a>
  </li> <li class="disabled">
  <span>…</span>
  </li> 
  <li>
    <a href="/videos?page=30">30</a>
  </li> 
  <li>
    <a href="/videos?page=31">31</a>
  </li> 
  <li class="next">
    <a rel="next" href="/videos?page=7">Next →</a>
  </li>
</ul>

Answer 2

你打错了，把<ul class="pagination pagination">改成<ul class="pagination pagination_links">

另外，如果你想要像
这样的东西 <-pre 1 2 ...6 7 ...->next，您需要将 css 更改为

.pagination_links li:nth-last-child(2) a {  
    display : none !important;
    text-decoration: none !important;
}

.pagination_links li:nth-last-child(3) a {
    display : none !important;
    text-decoration: none !important;
}

因为.pagination_links li:nth-last-child(1)是next->

使用 nth-last-child() 隐藏 will-paginate 的最后一页不起作用

Using nth-last-child() to hide last pages of will-paginate not working

html

css

pagination

will-paginate