选择具有一个类的所有元素以及另外两个类中的任何一个？

Question

我有一个工作选择器，我正用它来使用Tampermonkey增强网站。

我发现我想要使用的元素都包含title类和unread类。我这样选择了它们。

var sel = document.querySelectorAll('.title.unread');
for (var i = 0, e; e = sel[i]; i++) {
  e.title = e.innerText;
}

现在我发现我也想要同时具有title类和read类的元素。

所以逻辑上我想要一个能完成pseduocode .title + (.read OR .unread)

工作的选择器

实现这一目标最优雅的方法是什么？

Answer 1

这是你在看什么？

var sel = document.querySelectorAll('.title.unread, .title.read');

Answer 2

TL; DR

＆＃13;

＆＃13;

var sel = document.querySelectorAll('.title.unread, .title.read');
console.log(sel);

＆＃13;

<div class="title unread"></div>
<div class="title"></div>
<div class="title read"></div>

＆＃13;

＆＃13;

＆＃13;

数学

虽然CSS选择器之间没有括号，但有：

• 一个OR：逗号：,
• an AND：彼此相邻：.a.b

因此，根据Boolean algebra和distributive property，您的表达式可以展开：

.title AND (.read OR .unread) == (.title AND .read) OR (.title AND .unread)

Answer 3

您可以使用逗号分隔CSS选择器。在这种情况下，您希望将它们分开，如下所示：

var sel = document.querySelectorAll('.title.read, .title.unread');

如果您想扩展 css选择器的知识，可以访问w3schools CSS Selectors Reference。在这里，您可以找到有关如何使用每个选择器的示例。