CSS选择器，但不存在另一个类时
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器，但不存在另一个类时相关的知识，希望对你有一定的参考价值。
除非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>
答案
使用: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>另一答案
您可以使用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的所有元素都将为红色
另一答案
也许不是最好的解决方案，但您也可以使用属性选择器来选择您的特定元素，以防您不知道其他类是什么：
[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选择器，但不存在另一个类时的主要内容，如果未能解决你的问题，请参考以下文章