CSS属性选择与

Question

[class*="grid-"]{ 
 
    border: 2px solid green; 
 
} 
 
[class^="grid-"]{ 
 
    border: 2px solid red; 
 
}

<div class="row"> 
 
\t <div class="grid-sm-1-3">one</div> 
 
\t <div class="grid-sm-1-3">two</div> 
 
\t <div class="other class grid-sm-1-3">three</div> 
 
</div> 
 
<div class="layout-grid-edit">do not match at all</div>

问题开始时，如果元素有多个类，则class^="grid-="似乎没有工作，我不能依靠class*="grid-"，因为它也匹配的东西像layout-grid-edit这是不希望的。

Answer 1

替换：

[class*="grid-"]{ 
} 

有了：

[class^="grid-"], 
[class*=" grid-"]{ 
} 

Answer 2

@ 3zzy - 在下面给出这个属性选择器。此类型的选择将有效地瞄准与整个单词grid开始一个类的属性，紧接着连字符：

[class|="grid"] { border: 2px solid green; } 

看看这样做的伎俩，让我知道。