Css選擇器及其優(yōu)先級的介紹

大師兄

Css選擇器及優(yōu)先級選擇器

(1) 類選擇器  .class

           最常用的選擇器，一個(gè)標(biāo)簽可引用多個(gè)class 一個(gè)class也可被多個(gè)標(biāo)簽使用。

(2) ID選擇器  #ID

          優(yōu)先級很高的選擇器,但一個(gè)頁面的標(biāo)簽們只能有一個(gè)相同的ID，一個(gè)標(biāo)簽也只能有一個(gè)ID。

(3) 標(biāo)簽選擇器  p

為所有同標(biāo)簽設(shè)置統(tǒng)一樣式。優(yōu)先級低，常用于reset.css

(4) 屬性選擇器  a[href]

根據(jù)[]中信息匹配，不支持ie6、7

(5)后代選擇器  .class p、#ID p、.class .child、 ul li

為所選標(biāo)簽下所有 某一類型的所有后代元素（包括兒子，孫子）添加樣式。

(6) 子選擇器  .class>p

為所選標(biāo)簽下所有 某一類型的兒子元素添加樣式。

優(yōu)先級

先羅列幾種優(yōu)先級情況

!Important  #id  .class  p  .class p  p.class  .class>p

!important 毋庸置疑的最高（ie6不支持）

然后是#ID

然后是.class

最低當(dāng)然是標(biāo)簽選擇器

但現(xiàn)在要看后代選擇器、類選擇器、標(biāo)簽選擇器混用的情況了~

如果定義了 .red p{backgrund:red} .blue{background:blue}

<div         class=”red”>

<p class="blue">顯示紅色</p>

</div>

但如果加上p.blue{background:blue}則背景會(huì)是藍(lán)色。

.red p 和p.blue 他們是同級的，誰在下邊誰的優(yōu)先級高。和子選擇器也同級。

如果寫成.red p.blue{background:blue}或.red .blue{}則優(yōu)先級已經(jīng)高出一級了。

所以排序是 .red p.blue >.red .blue > .red p; p.blue>.blue>p

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！