或許大家平時(shí)總是在用的選擇器都是：#id .class 以及標(biāo)簽選擇器。可是這些還遠(yuǎn)遠(yuǎn)不夠，為了在開(kāi)發(fā)中更加得心應(yīng)手，本文總結(jié)了30個(gè)CSS3選擇器，希望對(duì)大家有所幫助。
1 *：通用選擇器
* { margin:0; padding:0; }
*選擇器是選擇頁(yè)面上的全部元素，上面的代碼作用是把全部元素的margin和padding設(shè)為0，最基本的清除瀏覽器默認(rèn)樣式的方法。
*選擇器也可以應(yīng)用到子選擇器中，例如下面的代碼：
#container * { border:1px solid black; }
這樣ID為container 的所有子標(biāo)簽元素都被選中了，并且設(shè)置了border。
2 #id：id選擇器
#container {
width: 960px;
margin: auto;
}
id選擇器是很?chē)?yán)格的并且你沒(méi)辦法去復(fù)用它。使用的時(shí)候大家還是得相當(dāng)小心的。需要問(wèn)自己一下：我是不是必須要給這個(gè)元素來(lái)賦值個(gè)id來(lái)定位它呢？
3 .class：類(lèi)選擇器
.error {
color: red;
}
這是個(gè)class選擇器。它跟id選擇器不同的是，它可以定位多個(gè)元素。當(dāng)你想對(duì)多個(gè)元素進(jìn)行樣式修飾的時(shí)候就可以使用class。當(dāng)你要對(duì)某個(gè)特定的元素進(jìn)行修飾那就是用id來(lái)定位它。
4 selector1 selector2：后代選擇器
li a {
text-decoration: none;
}
后代選擇器是比較常用的選擇器。如果你想更加具體的去定位元素，你可以使用它。例如，假如，你不需要定位所有的a元素，而只需要定位li標(biāo)簽下的a標(biāo)簽？這時(shí)候你就需要使用后代選擇器了。
提示：如果你的選擇器像X Y Z A B.error這樣，那你就錯(cuò)了。時(shí)刻都提醒自己，是否真的需要對(duì)那么多元素修飾。
5 tagName：標(biāo)簽選擇器
a { color: red; }
ul { margin-left: 0; }
如果你想定位頁(yè)面上所有的某標(biāo)簽，不是通過(guò)id或者是’class’，這簡(jiǎn)單，直接使用類(lèi)型選擇器。
6 selector:link selector:visited selector:hover selector:active 偽類(lèi)選擇器
一般情況下selector都為a標(biāo)簽，以上四種偽類(lèi)選擇器代表的意思如下：
link:連接平常的狀態(tài)。
visited:連接被訪問(wèn)過(guò)之后。
hover:鼠標(biāo)放到連接上的時(shí)候。
active:連接被按下的時(shí)候。
未移入a標(biāo)簽鏈接時(shí)：link
移入a標(biāo)簽鏈接時(shí)：link、hover
點(diǎn)擊a標(biāo)簽鏈接時(shí)：link、hover、active
點(diǎn)擊后未移入a標(biāo)簽連接時(shí)：link、visited
點(diǎn)擊后移入a標(biāo)簽連接時(shí)：link、visited、hover
點(diǎn)擊后再次點(diǎn)擊a標(biāo)簽連接時(shí)：link、visited、hover、active
這個(gè)就是所有組合的樣式了。
如果有多個(gè)同樣的樣式，后面的樣式會(huì)覆蓋前面的樣式，所以這四個(gè)偽類(lèi)的定義就有順序的要求了，而大家所說(shuō)的‘lvha’也是因?yàn)檫@個(gè)原因。
7 selector1 + selector2 ：相鄰選擇器
ul + p {
color: red;
}
它只會(huì)選中指定元素的直接后繼元素。上面那個(gè)例子就是選中了所有ul標(biāo)簽后面的第一段，并將它們的顏色都設(shè)置為紅色。
8 selector1 > selector2 : 子選擇器
div#container > ul {
border: 1px solid black;
}
它與差別就是后面這個(gè)指揮選擇它的直接子元素。看下面的例子
<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只會(huì)選中id為’container’的div下的所有直接ul元素。它不會(huì)定位到如第一個(gè)li下的ul元素。由于某些原因，使用子節(jié)點(diǎn)組合選擇器會(huì)在性能上有許多的優(yōu)勢(shì)。事實(shí)上，當(dāng)在javascript中使用css選擇器時(shí)候是強(qiáng)烈建議這么做的。
9 selector1 ~ selector2 : 兄弟選擇器
ul ~ p {
color: red;
}
兄弟節(jié)點(diǎn)組合選擇器跟相鄰選擇器很相似，然后它又不是那么的嚴(yán)格。ul + p選擇器只會(huì)選擇緊挨跟著指定元素的那些元素。而這個(gè)選擇器，會(huì)選擇跟在目標(biāo)元素后面的所有匹配的元素。
10 selector[title] : 屬性選擇器
a[title] {
color: green;
}
上面的這個(gè)例子中，只會(huì)選擇有title屬性的元素。那些沒(méi)有此屬性的錨點(diǎn)標(biāo)簽將不會(huì)被這個(gè)代碼修飾。