如何在Less中使用Starts with选择器选中含col-m-前缀类的col-d-1元素？

嘿，我来帮你搞定这个Less选择器的难题！你需要同时匹配.col-d-1和以col-m-开头类的元素，又不想用!important，那正确的Less写法应该用属性选择器结合父选择器来实现，具体代码如下：

.col-d-1 {
  // 匹配类属性以col-m-开头的情况
  &[class^='col-m-'],
  // 匹配类属性中包含" col-m-"的情况（处理该类不是第一个的场景）
  &[class*=' col-m-'] {
    background: red;
  }
}

为什么你之前的写法无效？ #

你尝试的.col-d-1 { &.col-m-* { ... } }之所以不行，是因为Less（以及CSS原生）的类选择器不支持直接在类名里用*作为通配符——类选择器的*只能作为全局通配符，不能放在类名中间。而属性选择器[class^='col-m-']是直接匹配元素的class属性值，这样就能灵活匹配以指定前缀开头的类名了。

关于优先级的说明 #

这种写法通过类选择器 + 属性选择器的组合，比单个类选择器的优先级更高，所以不用依赖!important就能覆盖之前作用在该元素上的样式，完美满足你的需求。

内容的提问来源于stack exchange，提问作者Dwza