前端必须掌握30个CSS3选择器
也许你已经学会了CSS的三个简单常用的选择器：#ID，.class，标签选择器，可是这些就足够了吗？随着CSS3的到来，作为前端开发者需要掌握下面三十个基本的选择器，这样才可以在平时开发中得心用手。
本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。
1、*：通用元素选择器
* {
margin: 0; padding: 0; }
*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法
*选择器也可以应用到子选择器中，例如下面的代码：
#container * {
border: 1px solid black; }
这样ID为container 的所有子标签元素都被选中了，并且设置了border。
查看演示
兼容性 IE6+ Firefox Chrome Safari Opera
#ID：ID选择器
#container {
width: 960px; margin: auto; }
ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。
查看演示
兼容性 IE6+ Firefox Chrome Safari Opera
.class:类选择器
.error {
color: red; }
类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。
查看演示
兼容性 IE6+ Firefox Chrome Safari Opera
X Y：标签组合选择器
li a {
text-decoration: none; }
标签组合选择器也是常用的选择器。
查看演示
兼容性 IE6+ Firefox Chrome Safari Opera
X：标签选择器
a { color: red; } ul { margin-left: 0; }
如果你只是想要页面中的某个标签样式改变，可以选择使用标签选择器。
查看演示
兼容性 IE6+ Firefox Chrome Safari Opera
X:visited and X:link
a:link { color: red; } a:visted { color: purple; }
伪类选择器，最常用的为A标签
查看演示
兼容性 IE7+ Firefox Chrome Safari Opera
X + Y：毗邻元素选择器
ul + p {
color: red; }
毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y
查看演示
兼容性 IE7+ Firefox Chrome Safari Opera