总结30个CSS3选择器

或许大家平时总是在用的选择器都是：#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;
}

它与差别就是后面这个指挥选择它的直接子元素。看下面的例子

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

#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属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。