有多少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>