大家平时总是在用的选择器都是：#id .class 以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。 1 *：通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。 *选择器也可以应用到子选择器中，例如下面的代码：

container * { border:1px solid black; }

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

container { width: 960px; margin: auto;

} id 选择器是很严格的并且你没办法去复用它。使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？ 3 .class：类选择器 .error { color: red; } 这是个 class 选择器。它跟 id 选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用 class 。当你要对某个特定的元素进行修饰那就是用 id 来定位它。 4 selector1 selector2：后代选择器 li a { text-decoration: none; } 后代选择器是 比较常用的 选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的 a 元素，而只需要定位 li 标签下的 a 标签？这时候你就需要使用 后代 选择器了。 提示：如果你的选择器像 X Y Z A B.error 这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。 5 tagName：标签选择器 a { color: red; }ul { margin-left: 0; } 如果你想定位页面上所有的某标签，不是通过 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’也是因为这个原因。 7 selector1 + selector2 ：相邻选择器 ul + p { color: red; } 它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有 ul 标签后面的第一段，并将它们的颜色都设置为红色。 8 selector1 > selector2 : 子选择器 div#container > ul { border: 1px solid black; } 它与差别就是后面这个指挥选择它的直接子元素。看下面的例子：

container > ul 只会选中 id 为’container’的 div 下的所有直接 ul 元素。它不会定位到如第一个 li 下的 ul 元素。

由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用 css 选择器时候是强烈建议这么做的。 9 selector1 ~ selector2 : 兄弟选择器 ul ~ p { color: red; } 兄弟节点组合选择器跟 相邻选择器 很相似，然后它又不是那么的严格。 ul + p 选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。 10 selector[title] : 属性选择器 a[title] { color: green; } 上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。

web前端免费学习资料，搜【WEB前端互动交流群】