CSS:not()没有像我期望的那样工作

Question

我有以下HTML和CSS代码,也可以在这里找到并播放//jsfiddle.net/0k1qah6x/7/

我的意图是数字"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

你的主持人没有.active他们的父母li所做的课程.

你必须改变你的选择器并移动 :not() 德选择器到父级,如下所示:

.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>