兼容 IE7+
12.
X[href*="nettuts"]
a[href*="tuts"] { color: #1f6053; /* nettuts green */}
* 表示只要属性值中包含双引号内的内容就满足选取要求，这段代码将选取跳转到
nettuts.com，
net.tutsplus.com，或者
tutsplus.com 等链接。兼容 IE7+
13.
X[href^="http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}
^ 表示只要属性值以双引号内的内容开头就满足选取要求，这段代码也常用来给页面中所有外部接设定样式。兼容 IE7+
14.
X[href$=".jpg"]
a[href$=".jpg"] { color: red;}
$ 表示只要属性值以双引号内的内容结尾就满足选取要求，这段代码将选取所有跳转到 jpg 图片的链接。兼容 IE7+
15.
X[data-*="foo"]
上面第 14 条提到了如何选取所有跳转到 jpg 图片的链接，若要选取跳转到图片的所有链接可以用下面的方法：
a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] { color: red;}
或者，先给图片链接添加
data- 属性（注：HTML5 Custom Data Attributes）<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
然后再通过属性选择器选取：
a[data-filetype="image"] { color: red;}
兼容 IE7+
16.
X[foo~="bar"]
a[data-info~="external"] { color: red;}a[data-info~="image"] { border: 1px solid black;}
如果属性值中有用空格分隔的一连串属性值，
~ 可以选取其中一个属性值，比如：<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
借助
~
