相反的选择器：not（.classA，.classB，.classC）用于（X和（A或B或C））选择器

Question

给定动态生成的类列表：

let dynamicClassList = ".classA, .classB, .classC"; // Contains 0 to N classes

使用:not()选择器，我可以轻松地构建负选择器classX && !(classA || classB || classC)像这样：

$(".classX:not(" + dynamicClassList + ")");

但我无法弄清楚如何建立正选择器classX && (classA || classB || classC)作为matches() selector doesn't seem compatible with browsers yet：

$(".classX:matches(" + dynamicClassList + ")");

任何人都知道如何使用not()以类似的方式构建快速选择器而不需要“循环”和“ifs”？

Answer 1

您可以将选择器classX && (classA || classB || classC)转换为(classX && classA) || (classX && classB) || (classX && classC)

以下是CSS选择器：

.classX.classA, .classX.classB, .classX.classC {}

然后你可以考虑一个小的JS代码来添加.classX以创建选择器：

let dynamicClassList = ".classA, .classB, .classC";

let selector = dynamicClassList.replace(/,/gi, '.classX, ');
selector=selector+'.classX';

$(selector).css('color','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classA classX">some text</div>
<div class="classB">some text</div>
<div class="classX classB">some text</div>
<div class="classX classB classA">some text</div>
<div class="classB classA">some text</div>
<div class="classX">some text</div>