30个你不可不知的css选择器
一、全浏览器支持的css选择器（由于很好理解，demo省略）
1.*

*通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。

* {
margin: 0;
padding: 0;
}  

也可以用*来匹配某一元素下的所有子元素：

#container * {
border: 1px solid black;
}  

2.#X

#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？

#container {
   width: 960px;
   margin: auto;
}   

3..X

.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。

.error {
  color: red;
}  

4.X Y

li a {
  text-decoration: none;
}     

目前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。

使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。

这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
5.X

a { color: red; }
ul { margin-left: 0; }     

标签选择器，优先级仅仅比*高，常用于css reset。


二、除IE6外浏览器支持的css选择器


6.X:link X:visited X:hover X:active

a:link { color: red; }
a:visted { color: purple; }    

伪类选择器，visted已被访问过的样式，hover鼠标经过的样式，link未被访问的样式。三种伪类选择器常用于链接，但不是说只适用于链接，可惜的是IE6只支持将这三种伪类选择器作用于链接。

这里明河说明一点，由于CSS优先级的关系(后面比前面的优先级高)，这几个伪类的书写顺序，一般是link、visted、hover、active。


7.X + Y

ul + p {
   color: red;
}     

相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配一个元素)

猛击这里进入这里查看demo
8.X > Y

子选择器，留意X > Y与X Y的区别，后者是子孙选择器，即无视层级，而X > Y是字选择器，只匹配X下的子元素Y。

从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。


9.X ~ Y

ul ~ p {
   color: red;
}      

相邻选择器，与X+Y类似，不同的是X ~ Y匹配的是元素集合，比如上述代码，匹配的是所有ul相邻的p


10.X[title]

a[title] {
   color: green;
}  

属性选择器，比如上述代码匹配的是带有title属性的链接元素。


11.X[title=""]

a[title="明河共影"]{
color:#096;
}  

属性选择器，上述代码不只匹配带有title属性，更匹配title属性等于明河共影的链接元素。[]内不只可用title属性，还可以使用其他属性。


12.X[title*=""]

a[title*="明"]{
color:#096;
} 

加了*号，意味着是模糊匹配，比如上述代码，会匹配title属性为明或明河或明河共影等带有明字的链接属性。


13.X[title^=""]

a[title^="明"]{
color:#096;
} 

模糊匹配,与*的作用相反，^起到排除的作用，比如上述代码，会匹配title属性不带有明字的链接属性。


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"] {
   bo