有多少CSS选择器可以包含？

Question

我已经尝试寻找解决这个问题的答案，但无济于事：

我正在使用css选择器来定位所有以col-1、col-2、col-3、col-开头的类名[class*="col-"]。但是我与一些其他第三方集成类名发生了冲突：col-md-11、col-lg-2、col-sm-3... 非常感谢，有没有人有任何想法只选择出类名：col-1、col-2、col-3、col-... 最简洁的方式（可能只需要一行代码）。

我的HTML示例：

<div class="row row_1">
  <div class="col-4"></div>
  <div class="col-10"></div>
  <div class="col-3"></div>
  <div class="col-md-11"></div>
</div>
<div class="row row_2">
  <div class="col-12"></div>
  <div class="col-lg-2"></div>
  <div class="col-8"></div>
  <div class="col-sm-3"></div>
</div>

我尝试在互联网上搜索，但找不到解决方案。

Answer 1

这有点复杂，但你可以将你现有的内容与:not选择器结合起来；

[class*='col-']:not([class*='col-md'],[class*='col-lg'],[class*='col-sm']){
  color: red;
}

<div class="row row_1">
  <div class="col-4">红色</div>
  <div class="col-10">红色</div>
  <div class="col-3">红色</div>
  <div class="col-md-11">非红色</div>
</div>
<div class="row row_2">
  <div class="col-12">红色</div>
  <div class="col-lg-2">非红色</div>
  <div class="col-8">红色</div>
  <div class="col-sm-3">非红色</div>
</div>