Modo corretto da usare: non il selettore insieme a "Attributo contiene" il selettore

Question

Sto creando un layout bootstrap e ho bisogno di comprimere il riempimento / margine su tutte le colonne Col- * tranne colonne COL-XS- *.Ho provato il selettore sotto senza successo.

.grid [class^="col-"]:not([class^="col-xs-"]) {
    padding: 0;
    margin: 0;
}

.

Forse sto confondendo qualcosa o questo non è supportato?Capisco che posso usare quanto segue, ma mi stavo chiedendo perché la soluzione sopra non funziona.

.grid [class^="col-sm-"], .grid [class^="col-md-"], .grid [class^="col-lg-"] {
    padding: 0;
    margin: 0; 
}

.

Answer 1

La classe COL-XS- * viene utilizzata sull'elemento COL-SM-, COL-MD, quindi l'elemento è corrispondente a entrambi.Funziona bene se hai solo col-sm- * e non col-xs- * sullo stesso elemento.

@media (min-width:768px) {

  .row.grid {margin-left:0;margin-right:0;}
  .grid [class*="col-"] {padding:0;}

}

.

http://jsbin.com/fabos/2/edit