10. X[title]a[title] { color: green;}
属性选择器，如上述代码匹配的是带有title属性的链接元素。
11. X[title=""]a[title="maomao"] {color:#096;}
属性选择器，上述代码不只匹配带有title属性，更匹配title属性等于maomao的链接元素。[]内不只可用title属性，还可以使用其他属性。
12. X[title*=""]a[title*="mao"] {color:#096;}
加了*号，意味着是模糊匹配，如上述代码，会匹配title属性为mao或maomao或maomao520等带有maomao的链接属性。
13. X[title^=""]a[title^="maomao"]{color:#096;}
模糊匹配,与*的作用相反，^起到排除的作用，比如上述代码，会匹配title属性不带有maomao的链接属性。
14. X[href$=""]a[href$=".png"] { color: red;}
在属性选择器中多一个$符号，用于匹配结尾为特定字符串的元素，比如上述代码匹配的就是href属性值的结尾为.png的链接。
15.X[data-*=""]a[data-filetype="image"] {color: red;}
data-filetype这个属性目前用的实在不多，但有些场合非常好用。比如我要匹配所有的数据类型为图片的链接，如果使用X[href$=""]的方式如下：
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {color: red;}
而使用data-filetype，只要：
a[data-filetype="image"] {color: red;}
当然前提是你给每一个链接加上data-filetype属性。
16.X[foo~=""]a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
这也是非常少用的选择器，加上~号，有一种情况特别适用，比如你有个data-filetype=”external image”属性，这时候我希望分别针对external和image样式控制。
a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
上述代码会匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。
17.X:checked
input[type=radio]:checked {border: 1px solid black;}
这个伪类选择器只用于匹配带有checked属性的元素，比如radio、checkbox即单选框和多选框。
目前这个伪类选择器，IE9下都不支持，非IE浏览器基本上都支持。
三、除IE8以下的浏览器支持的css选择器
18.X:after
.clearfix:after {content: "";display: block;clear: both; visibility: hidden;font-size: 0; height: 0;}
.clearfix {*display: inline-block;_height: 1%;0}
我想上面这段代码，很多朋友都非常熟悉，是清理浮动时常用的hack方法。:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影。
19.X:hover
div:hover {background: #e3e3e3;}
