正确的方法：不是选择器以及“属性包含”选择器

Question

我正在创建一个引导布局，并且需要在除Col-XS-*列之外的所有Col- *列上折叠填充/余量。我尝试了下面的选择器无济于。

.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