CSS/SCSS 选择元素没有继承类

Question

我有以下 html:

<ul class="pagination ">
    <li class="">
        <a href="/en/products/page5">
            <span><i class="fa fa-chevron-left"></i></span>
        </a>
    </li>
    <li class="">
        <a href="/en/products/page1">1</a>
    </li>
    <li class="">
        <a href="/en/products/page2">2</a>
    </li>
    <li class="">
        <a href="/en/products/page3">3</a>
    </li>
    <li class="">
        <a href="/en/products/page4">4</a>
    </li>
    <li class="">
        <a href="/en/products/page5">5</a>
    </li>
    <li class="active">
        <a href="/en/products/page6">6</a>
    </li>
    <li class="hide">
        <a href="/en/products/page7">
            <span><i class="fa fa-chevron-right"></i></span>
        </a>
    </li>
</ul>

在这个例子中，我在最后一页，所以“下一页”按钮自动隐藏。 我希望最后一个可见元素(第 6 页)具有圆 Angular 边框。 如何在不更改 HTML 的情况下使用 css/scss 选择“第 6 页”？ 我想到了这样的事情:

.pagination > li:not( + li.hide) > a,
.pagination > li:not( + li.hide) > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

但这行不通。 明确一点:我想在 .hide 之前选择元素而不依赖于 .active 类。

Answer 1

您可以使用 :nth-last-child() 选择器从元素列表的末尾开始并选择您拥有的倒数第二个元素。这是 how nth-last-child works .

.pagination > li {
  border: 2px solid #000;
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
}

.pagination > li.active:nth-last-child(2) {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pagination > li.hide {
  display: none;
}

<ul class="pagination ">
  <li class="">
      <a href="/en/products/page5">
          <span><i class="fa fa-chevron-left"></i></span>
      </a>
  </li>
  <li class="">
      <a href="/en/products/page1">1</a>
  </li>
  <li class="">
      <a href="/en/products/page2">2</a>
  </li>
  <li class="">
      <a href="/en/products/page3">3</a>
  </li>
  <li class="">
      <a href="/en/products/page4">4</a>
  </li>
  <li class="">
      <a href="/en/products/page5">5</a>
  </li>
  <li class="active">
      <a href="/en/products/page6">6</a>
  </li>
  <li class="hide">
      <a href="/en/products/page7">
          <span><i class="fa fa-chevron-right"></i></span>
      </a>
  </li>
</ul>