总结30个CSS3选择器

或许大家平时总是在用的选择器都是：#id  .class  以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。

1 *：通用选择器

*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。  

*选择器也可以应用到子选择器中，例如下面的代码：

这样ID为container 的所有子标签元素都被选中了，并且设置了border。

2 #id：id选择器

id选择器是很严格的并且你没办法去复用它。使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？

3 .class：类选择器

这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。

4 selector1 selector2：后代选择器

后代选择器是比较常用的选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的a元素，而只需要定位li标签下的a标签？这时候你就需要使用后代选择器了。  

提示：如果你的选择器像X Y Z A B.error这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。

5 tagName：标签选择器

如果你想定位页面上所有的某标签，不是通过id或者是’class’，这简单，直接使用类型选择器。

6 selector:link  selector:visited  selector:hover  selector:active  伪类选择器

一般情况下selector都为a标签，以上四种伪类选择器代表的意思如下：

link:连接平常的状态。  

visited:连接被访问过之后。  

hover:鼠标放到连接上的时候。  

active:连接被按下的时候。

未移入a标签链接时：link  

移入a标签链接时：link、hover  

点击a标签链接时：link、hover、active  

点击后未移入a标签连接时：link、visited  

点击后移入a标签连接时：link、visited、hover  

点击后再次点击a标签连接时：link、visited、hover、active  

这个就是所有组合的样式了。  

如果有多个同样的样式，后面的样式会覆盖前面的样式，所以这四个伪类的定义就有顺序的要求了，而大家所说的‘lvha’也是因为这个原因。