正文
一、属性值正则匹配选择器
属性值正则匹配选择器包括下面 3 种：
[attr^="val"] [attr$="val"] [attr*="val"]
这三种属性选择器完全是字符匹配，而非单词匹配。其中 ^、美元符号 $ 以及星号 * 都是正则表达式中的特殊标识符，分别表示前匹配、后匹配和任意匹配。
二、实例
我们可以借助属性选择器来辅助我们实现搜索过滤效果，如通讯录、城市列表，这样做性能高，代码少。
HTML结构如下：
<input type="search" id="input" placeholder="输入城市名称或拼音" /> <ul> <li data-search="重庆市chongqing">重庆市</li> <li data-search="哈尔滨市haerbing">哈尔滨市</li> <li data-search="长春市changchun">长春市</li> <li data-search="兰州市lanzhou">兰州市</li> <li data-search="北京市beijing">北京市</li> <li data-search="杭州市hangzhou">杭州市</li> <li data-search="长沙市changsha">长沙市</li> <li data-search="沈阳市shenyang">沈阳市</li> <li data-search="成都市chengdu">成都市</li> <li data-search="合肥市hefei">合肥市</li> <li data-search="天津市tianjin">天津市</li> <li data-search="西安市xian">西安市</li> <li data-search="武汉市wuhan">武汉市</li> <li data-search="济南市jinan">济南市</li> <li data-search="广州市guangzhou">广州市</li> <li data-search="南京市nanjing">南京市</li> <li data-search="上海市shanghai">上海市</li> <li data-search="昆明市kunming">昆明市</li> <li data-search="郑州市zhangzhou">郑州市</li> <li data-search="贵阳市guiyang">贵阳市</li> <li data-search="西宁市xining">西宁市</li> <li data-search="海口市haikou">海口市</li> <li data-search="南昌市nanchang">南昌市</li> <li data-search="香港 特区xianggang">香港 特区</li> <li data-search="澳门 特区aomen">澳门 特区</li> </ul>
JS 代码如下：
var eleStyle = document.createElement('style'); document.head.appendChild(eleStyle); // input element input.addEventListener("input", function() { var value = this.value.trim(); eleStyle.innerHTML = value ? '[data-search]:not([data-search*="'+ value +'" i]) { display: none; }' : ''; });
PS: 正则匹配运算符是属性选择器新增的运算符，它可以忽略属性值大小写，使用字符 i 或者 I 作为运算符值，但约定俗称都使用小写字母 i 作为运算符。（上面的 JS 代码中就有用到）
最终效果如下：
1
2
CSS 的一些高级特性，学起来还是蛮有意思的，深入研究的话，会发现平时一些严重依赖 js 代码的模块，都是可以解耦合的，加油继续好好学。
