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

在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需要共存,或许有其他方面的考虑?

阅读 132
评论
    2 个回答
    • 983

    假如@{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"也能匹配, 这不是所希望的

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

        撰写回答

        登录后参与交流、获取后续更新提醒