css属性选择器*=和^=为何需要同时存在？

Question

在Ant.Design的源码中看到一段样式代码：

// Config global less under antd
[class^=~'@{ant-prefix}-'],
[class*=~' @{ant-prefix}-'] {
  // remove the clear button of a text input control in IE10+
  &::-ms-clear,
  input::-ms-clear,
  input::-ms-reveal {
    display: none;
  }

  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box; // 1
  }
}

疑惑点在于
[class*=~' @{ant-prefix}-']是否已包含[class^=~' @{ant-prefix}-']覆盖的部分？为何这两个selector需要共存，或许有其他方面的考虑？

Answer 1

假如@{ant-prefix}的值为antd
[class*=~' @{ant-prefix}-'] 注意前面有个空格
能匹配class="aaa antd-a"
但是不能匹配class="aaa bbbantd-a"

[class^=~'@{ant-prefix}-']
能匹配class="antd-a bbb"

---

假如只写[class*=~'@{ant-prefix}-']
那么上面的class="aaa bbbantd-a"也能匹配, 这不是所希望的

Answer 2

有个空格.
如果没有的话，可以认为包含