CSS选择器，但不存在另一个类时

Question

除非jdgm-paginate__page也应用于元素，否则如何选择类jdgm-paginate__next-page？

<a class="jdgm-paginate__page " data-page="2">2</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2"></a>

Answer 1

使用:not()伪类：

.jdgm-paginate__page:not(.jdgm-paginate__next-page):not(.jdgm-paginate__last-page) {
  color: red;
}

a {
  display: block;
}

<a class="jdgm-paginate__page " data-page="2">select</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2">don't select next</a>
<a class="jdgm-paginate__page jdgm-paginate__last-page" data-page="2">don't select last</a>

Answer 2

您可以使用CSS：not pseudo class。例如：

.jdgm-paginate__page {
  background: red;
}

无论其他类如何，这都会使该类的所有元素都变为红色。

.jdgm-paginate__page:not(.jdgm-paginate__next-page) {
  background: red;
}

具有类.jdgm-paginate__page但不包含.jdgm-paginate__next-page的所有元素都将为红色

Answer 3

也许不是最好的解决方案，但您也可以使用属性选择器来选择您的特定元素，以防您不知道其他类是什么：

[class="jdgm-paginate__page"] {
  color: red;
}

a {
  display: block;
}

<a class="jdgm-paginate__page" data-page="2">select</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2">don't select next</a>
<a class="jdgm-paginate__page jdgm-paginate__last-page" data-page="2">don't select last</a>