Javascript: Css-Selectors：(Bug还是特性？)Class-Name“starts with”仅选择元素，当class位于class-list中的第一个位置时

Question

我想使用querySelector(...)选择一个元素，假设有一个html片段，如下所示：

<div class="Class1_a123 Class2_z987">Div1 content</div>
<div class="Class1_a123">Div2 content</div>

我只想选择第一个div，如果它有第二个类(并且是动态设置的)。因此，我编写了如下选择器：

document.querySelector("div[class^='Class2']");

结果:未选择任何内容。所以我想知道，是否存在层次结构，哪个类位于类列表的前面。我认为它会检查所有包含的类，无论它们是否以我需要的表达式开头。

在我的思想和/或理解中有没有根本的错误，选择器是如何工作的？

如果这是正确的，那么元素类列表中的类的顺序对于网站的布局/样式可能很重要？在这种情况下，我必须考虑我过去编写的所有代码，在这些代码中，我使用了class^='...'选择器，并将其替换为class*='...'，以使其按预期工作。

欢迎提出任何建议/更正。

Answer 1

因此，基本上，您正在尝试查询属性为"class“以"Class2”开头的元素。要使其正常工作，您需要更改类的顺序。

<div class="Class2_z987 Class1_a123">Div1 content</div>
<div class="Class1_a123">Div2 content</div>