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伪类。例如：

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

CSS选择器，但不存在其他类时

3 个答案: