Combien de sélecteurs CSS peuvent être inclus ?

Question

J'ai essayé de chercher une réponse à ce problème, mais en vain :

J'utilise le sélecteur CSS pour localiser tous les noms de classe commençant par col-1, col-2, col-3, col-[class*="col-"]. Mais je suis en conflit avec d'autres noms de classes d'intégration tierces : col-md-11, col-lg-2, col-sm - 3... Merci beaucoup, quelqu'un a-t-il des idées pour sélectionner uniquement les noms de classe : col-1, col-2, col-3, col-... La manière la plus concise (peut-être juste un ligne de code).

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

J'ai essayé de chercher sur Internet mais je n'ai pas trouvé de solution.

Answer 1

C'est un peu compliqué, mais vous pouvez combiner votre contenu existant avec le sélecteur :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>