css属性选择器诸如Class^=,Class*= ,Class$=释义

在Bootstrap的css中看到如下选择器代码：

.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

仔细查了下含义以及相关使用，记录如下。

1.选择其中的value值也可以加引号

选择器	描述
[attr]	用于选取带有指定属性的元素
[attr=value]	用于选取带有指定属性和值的元素
[attr~=value]	用于选取属性值中包含指定词汇的元素
[attr|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attr^=value]	匹配属性值以指定值开头的每个元素。
[attr$=value]	匹配属性值以指定值结尾的每个元素。
[attr*=value]	匹配属性值中包含指定值的每个元素。

2.示例

(1).下面代码会查找出class名称为 ‘col-’ 开头的div

div[class^='col-']{}

(2).下面代码会查找出所有class名为 ‘item’ 的div

div[class*='col-']{}

3.css选择器具体分类及详解 可以参考

http://www.w3school.com.cn/css/css_selector_type.asp