作為一個(gè)Web開發(fā)者，掌握必要的前臺(tái)技術(shù)也是很重要的，特別是在遇到一些實(shí)際問題的時(shí)候。這里給大家列舉一個(gè)例子：

給一個(gè)p標(biāo)簽增加一個(gè)類（class），可是執(zhí)行后該class中的有些屬性并沒有起作用。通過Firebug查看，發(fā)現(xiàn)沒有起作用的屬性被覆蓋了。這個(gè)時(shí)候突然意識(shí)到了CSS選擇器的優(yōu)先級(jí)問題，這里就CSS選擇器的優(yōu)先級(jí)問題做了一些總結(jié)。

51CTO推薦閱讀：巧妙地使用CSS選擇器

選擇器種類

嚴(yán)格來講，選擇器的種類可以分為三種：標(biāo)簽名選擇器、類選擇器和ID選擇器。而所謂的后代選擇器和群組選擇器只不過是對(duì)前三種選擇器的擴(kuò)展應(yīng)用。而在標(biāo)簽內(nèi)寫入style=""的方式，應(yīng)該是CSS的一種引入方式，而不是選擇器，因?yàn)楦揪蜎]有用到選擇器。而一般人們將上面這幾種方式結(jié)合在一起，所以就有了5種或6種選擇器了。

三種基本的選擇器類型

語法如下：

◆標(biāo)簽名選擇器，如：p{}，即直接使用HTML標(biāo)簽作為選擇器。

◆類選擇器，如.polaris{}。

◆ID選擇器，如#polaris{}。

注意，ID選擇器跟類選擇器有很大的不同：一個(gè)頁(yè)面內(nèi)不能出現(xiàn)相同的ID；再就是ID也是后臺(tái)開發(fā)人員會(huì)經(jīng)常用的，所以前端開發(fā)人員應(yīng)該盡量少的使用。當(dāng)然跟后臺(tái)人員的工作配合十分嫻熟之后，這些都不會(huì)成為限制。

擴(kuò)展選擇器

◆后代選擇器，如.polaris span img{}，后代選賊器實(shí)際上是使用多個(gè)選擇器加上中間的空格來找到具體的要控制標(biāo)簽。

◆群組選擇器，如div,span,img{}，群組選擇器實(shí)際上是對(duì)CSS的一種簡(jiǎn)化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。

選擇器的優(yōu)先級(jí)別

了解了各種選擇器后，還有一個(gè)重要的知識(shí)點(diǎn)就是CSS選擇器的優(yōu)先級(jí)。這也就是為什么polaris會(huì)遇到文章開頭的問題。舉個(gè)簡(jiǎn)單的例子：