使用第n-最后一个孩子（）隐藏不工作

Question

意志PAGINATE的最后几页，我想隐藏的最后几页将分页这使代替：

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

它看起来像这样：

上一页| 1 2 .. 5 7 .. |接下来

通过意志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) { 
 
\t display : none !important; 
 
\t text-decoration: none !important; 
 
} 
 

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

我也想，也许我不得不隐藏实际的href DIV，而不是李，所以我想这太：

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

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

仍然一无所获。有任何想法吗？

Answer 1

你有一个错字，如果你想要像
<-pre 1 2 ...6 7 ...->next改变<ul class="pagination pagination">到<ul class="pagination pagination_links">

此外，你需要你的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->

Answer 2

您忘记了将此类加入pagination_links至ul。

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

 
.pagination_links li:nth-last-child(2) { 
 
\t display : none !important; 
 
\t 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>