CSS 属性选择器开头

Question

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

<div class="row">
	<div class="grid-sm-1-3">one</div>
	<div class="grid-sm-1-3">two</div>
	<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

@3zzy - 在下面尝试此属性选择器。这种类型的选择器将有效地定位以整个单词开头的类属性 grid ，紧跟连字符：

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

看看这是否可行，并让我知道。

Answer 2

已替换：

[class*="grid-"]{ 
}

跟：

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