如果已经使用了contains选择器，为什么要使用starts with选择器

Question

通过查看其他SO问题，我了解到*=表示"包含"，^=表示"以"开头。我在一些第三方CSS代码中注意到了[class^="icon-"], [class*=" icon-"] {/* CSS Here */}。我觉得这是多余的；我不清楚为什么[class*=" icon-"] {/* CSS Here */}不够。

重复使用^=选择器是否有任何用途（例如可读性、旧浏览器支持等）？

问题参考：
在css中选择元素时，插入符号^的作用是什么
等号前的星号（*=）是什么意思？感叹号怎么样？

Answer 1

它不是一个多余的选择器。它可能用于选择具有icon-类的元素，即使它是类列表中的第二个元素，如下面的代码段所示。

[class^="icon-"]将只选择类属性值以icon-开头的元素。

[class*=" icon-"]将选择在其类列表中包含icon-的类的所有元素。请注意他们以前是如何专门使用空间的。

引用Spike的评论代码

没有空间的CCD_ 11也将匹配诸如CCD_ 12或CCD_。

本质上，选择器组用于选择具有至少一个以icon-开头的类作为其类列表的一部分的所有元素。

[class^="icon-"] {
  color: green;
}
[class*=" icon-"] {
  color: red;
}
[class^="icon-"],
[class*=" icon-"] {
  background: beige;
}
[class*="icon-"]{
  border: 1px solid brown;
}

<div class="icon-1">Only Icon class</div>
<div class="a icon-1">Some other class before</div>
<div class="a not-icon-1">Some other class before</div>