巧用CSS屬性值正則匹配選擇器
屬性值正則匹配選擇器包括下面3種：
- [attr^="val"]
- [attr$="val"]
- [attr*="val"]
這3種屬性選擇器是字符匹配，而非單詞匹配。其中，尖角符號 ^、美元符號 $ 以及星號 * 都是正則表達式中的特殊標識符，分別表示前匹配、后匹配和任意匹配。
利用上述三種選擇器可以愉快的實現在鏈接前面添加小圖標的效果，而更酷的是可以實現列表搜索過濾，太酷了！
顯示超鏈接的小圖標和文件類型圖表
利用[attr^="val"]前匹配選擇器可以判斷<a>元素的鏈接地址類型，以用來顯示對應的小圖標。顯示超鏈接的小圖標的樣式如下：
效果
而利用[attr$="val"]后匹配選擇器則可以實現顯示文件類型小圖標。CSS如下：
效果如下
CSS屬性選擇器搜索過濾技術
我們可以借助屬性選擇器來輔助我們實現搜索過濾效果，如通訊錄、城市列表，這樣做性能高，代碼少。
HTML結構如下
此時，當我們在輸入框種輸入內容的時候，只要根據輸入內容動態創建一段CSS代碼就可以實現搜索匹配效果了，無需自己寫代碼進行匹配驗證。
最終效果如下
是不是太酷了！
