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

程然然然然然
  • 59

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

回复
阅读 1.4k
2 个回答
✓ 已被采纳

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏