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-"]{
}