Berapakah bilangan pemilih CSS yang boleh disertakan?

Question

Saya telah cuba mencari jawapan kepada masalah ini, tetapi tidak berjaya:

Saya menggunakan pemilih css untuk mencari semua nama kelas bermula dengan col-1, col-2, col-3, col-[class*="col-"]. Tetapi saya bercanggah dengan beberapa nama kelas integrasi pihak ketiga yang lain: col-md-11, col-lg-2, col-sm - 3... Terima kasih banyak, adakah sesiapa mempunyai idea untuk memilih hanya nama kelas: col-1, col-2, col-3, col-... Cara paling ringkas (mungkin hanya satu baris kod).

Contoh HTML saya:

<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>

Saya cuba mencari di internet tetapi tidak menemui penyelesaian.

Answer 1

Ia agak rumit, tetapi anda boleh menggabungkan kandungan sedia ada anda dengan pemilih :bukan;

[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>