问答

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

作者:admin 2021-06-29 我要评论

在Ant.Design的源码中看到一段样式代码: // Config global less under antd[class^=~'@{ant-prefix}-'],[class*=~' @{ant-prefix}-'] { // remove the clear bu...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • css属性选择器*=和^=为何需要同时存在

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

  • datagrip db2 的TIMESTAMP(6)总是报错

    datagrip db2 的TIMESTAMP(6)总是报错

  • 在componentDidMount中直接调用setStat

    在componentDidMount中直接调用setStat

  • api 免费管理工具

    api 免费管理工具

腾讯云代理商
海外云服务器