CSS :not() is not working as I would expect

Question

我有以下 HTML 和 CSS 代码，也可以在这里找到并使用它们//jsfiddle.net/0k1qah6x/7/

我的意图是让类别为“active”的数字“1”不是红色。

.pdf-pagination a:not(.active) {
  color: red;
  text-decoration: none;
}

<div class="pdf-pagination">
  <ul>
    <li class="disabled">
      <a id="pdfPaginationLink0" href="#" data-page="0">←</a>
    </li>
    <li class="active">
      <a id="pdfPaginationLink1" href="#" data-page="1">1</a>
    </li>
    <li>
      <a id="pdfPaginationLink2" href="#" data-page="2">2</a>
    </li>
    <li>
      <a id="pdfPaginationLink3" href="#" data-page="2">→</a>
    </li>
  </ul>
</div>

Answer 1

你的 anchor 没有 .active 类，它们的父类 li 有。

您必须更改选择器并将 :not() de选择器移动到父级，如下所示:

.pdf-pagination li:not(.active) a {
  color: red;
  text-decoration: none;
}

<div class="pdf-pagination">
  <ul>
    <li class="disabled">
      <a id="pdfPaginationLink0" href="#" data-page="0">←</a>
    </li>
    <li class="active">
      <a id="pdfPaginationLink1" href="#" data-page="1">1</a>
    </li>
    <li>
      <a id="pdfPaginationLink2" href="#" data-page="2">2</a>
    </li>
    <li>
      <a id="pdfPaginationLink3" href="#" data-page="2">→</a>
    </li>
  </ul>
</div>