Wie viele CSS-Selektoren können eingebunden werden?

Question

Ich habe versucht, nach einer Antwort auf dieses Problem zu suchen, aber ohne Erfolg:

Ich verwende den CSS-Selektor, um alle Klassennamen zu finden, die mit col-1, col-2, col-3, col-[class*="col-"] beginnen. Aber ich habe einen Konflikt mit einigen anderen Integrationsklassennamen von Drittanbietern: col-md-11, col-lg-2, col-sm - 3... Vielen Dank, hat jemand eine Idee, nur die Klassennamen auszuwählen: col-1, col-2, col-3, col-... Der prägnanteste Weg (vielleicht nur einer Codezeile).

Mein HTML-Beispiel:

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

Ich habe versucht, im Internet zu suchen, konnte aber keine Lösung finden.

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>