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; } 

看看這樣做的伎倆，讓我知道。