Правильный способ использования: не селектор вместе с «атрибутом содержит» селектор

Question

Я создаю макет загрузки и возникнуть необходимость свернуть накладку / маржу на всех колоннах Col- *, кроме колонн Col-XS- *.Я попробовал ниже селектор безрезультатно.

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

.

Может быть, я что-то запутаю, или это просто не поддерживается?Я понимаю, что могу использовать следующее, но было интересно, почему вышеуказанное решение не работает.

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

.

Answer 1

Класс Col-XS- * используется на Col-SM-, Col-Md-элемент, поэтому элемент соответствует обоим.Он работает нормально, если у вас просто есть COL-SM- *, а не Col-XS- * на одном элементе.

@media (min-width:768px) {

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

}

.

http://jsbin.com/fabos/2/edit сильный>