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页）具有圆形边框。如何在不更改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>

Answer 2

我不认为你可以单独使用css来实现这一点。

我知道你没有用javascript或jquery标记你的问题，但是这里有一个使用CSS和jQuery的解决方案可能会有帮助。

为简单起见，我使用color属性而不是border。

$('.hide').prev("li").find("a").addClass('border');

.border {
  color: red;
}

.pagination > li:last-child:not(.hide) > a {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>arrow</span>
        </a>
    </li>
</ul>
<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>
   
</ul>

CSS / SCSS select元素没有继承类

2 个答案: