使用 CSS 定位具有特定类的第二个和倒数第二个元素 [重复]答案

【问题标题】：Target the second and penultimate elements having a specific class with CSS [duplicate]使用 CSS 定位具有特定类的第二个和倒数第二个元素 [重复]
【发布时间】：2021-02-15 09:49:03
【问题描述】：

我有以下显示帖子分页结构的代码。我想知道是否可以通过 CSS 定位具有 .page-numbers 类的 second 和 penultimate 元素。如果是这样，怎么做？我无法控制标记，因此无法向其添加其他类。

任何帮助将不胜感激。

<nav class="pagination">
    <div class="nav-links">
        <a class="prev page-numbers" href="https://page.com/page/1/">Previous</a>
        <a class="page-numbers" href="https://page.com/page/1/">1</a>
        <span class="page-numbers current">2</span>
        <a class="page-numbers" href="https://page.com/page/3/">3</a>
        <a class="page-numbers" href="https://page.com/page/4/">4</a>
        <span class="page-numbers dots">&hellip;</span>
        <a class="page-numbers" href="https://page.com/page/10/">10</a>
        <a class="next page-numbers" href="https://page.com/page/3/">Next</a>
    </div>
</nav>

【问题讨论】：

:nth-child(2) 和 :nth-last-child(2) ?

标签： html css pagination

【解决方案1】：

<style>
.page-numbers:nth-last-child(2),.page-numbers:nth-child(2)
    {
    background-color:yellow;
    }

</style>

<nav class="pagination">
    <div class="nav-links">
        <a class="prev page-numbers" href="https://page.com/page/1/">Previous</a>
        <a class="page-numbers" href="https://page.com/page/1/">1</a>
        <span class="page-numbers current">2</span>
        <a class="page-numbers" href="https://page.com/page/3/">3</a>
        <a class="page-numbers" href="https://page.com/page/4/">4</a>
        <span class="page-numbers dots">&hellip;</span>
        <a class="page-numbers" href="https://page.com/page/10/">10</a>
        <a class="next page-numbers" href="https://page.com/page/3/">Next</a>
    </div>
</nav>

【讨论】：