或許大家平時總是在用的選擇器都是：#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屬性的元素。那些沒有此屬性的錨點標簽將不會被這個代碼修飾。