[4位特殊性標(biāo)志]>聲明先后順序!important>[id>class>tag]??使用!important可以改變優(yōu)先級別為最高,其次是style對象,然后是id>class>tag,">
關(guān)于css樣式優(yōu)先級

關(guān)于css樣式優(yōu)先級

ID:8816300

大?。?0.00 KB

頁數(shù):4頁

時(shí)間:2018-04-08

關(guān)于css樣式優(yōu)先級_第1頁
關(guān)于css樣式優(yōu)先級_第2頁
關(guān)于css樣式優(yōu)先級_第3頁
關(guān)于css樣式優(yōu)先級_第4頁
資源描述:

《關(guān)于css樣式優(yōu)先級》由會員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。

1、關(guān)于CSS樣式優(yōu)先級一般情況下:[1位重要標(biāo)志位]>[4位特殊性標(biāo)志]>聲明先后順序!important>[id>class>tag]??使用!important可以改變優(yōu)先級別為最高,其次是style對象,然后是id>class>tag,另外,另外在同級樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級。先來看下!important這個(gè)詭異的東西。1??2??div{background:?red?!important;?background:?blue}3??除了IE6,其他瀏覽器都會顯示背景為紅色,正是!importan

2、t的作用,意思就是只要我在這里我就是最重要的啦,任何東西都不能取代我,沒看見都是一個(gè)!外加一個(gè)英文單詞important嗎?很形象,很貼切了。IE6這里會顯示背景為藍(lán)色,并不是IE6不支持!important,而是它會按照樣式聲明順序后出現(xiàn)的覆蓋前面的,此時(shí)它已經(jīng)不認(rèn)識!important了,它六親不認(rèn)了。這正是廣為流傳的IE6hack之一。而如果這樣寫會正常顯示背景為紅色:1??2?div{background:?blue;?background:?red?!important;?}3??再來看下4位特殊性標(biāo)志[0.

3、0.0.0]從左至右,每次給某一個(gè)位置+1,前一段對后一段具有無可辯駁的壓倒性優(yōu)勢。無論后一位數(shù)值有多大永遠(yuǎn)無法超過前一位的1。1,內(nèi)聯(lián)樣式[1.0.0.0]?A:B:還有就是JS控制的內(nèi)聯(lián)樣式style對象,document.getElementById("demo").style.color="red";這兩者屬于同一級別,不過一般情況是JS控制的內(nèi)聯(lián)樣式優(yōu)先級高,這與先后順序申明有關(guān)系與本質(zhì)無關(guān),因?yàn)橥鵇OM操作是在DOM樹加載完畢之后。2,ID選擇器?[0.1.0.0]3,類,屬性,偽類選擇器

4、?[0.0.1.0]4,元素標(biāo)簽,偽元素選擇器?[0.0.0.1]關(guān)于CSS選擇器可以查看W3C或者CSS的手冊,不啰嗦了。注意下偽類選擇器LVHA偽類,樣式按LVHA優(yōu)先級順序從右至左覆蓋,不同的順序會產(chǎn)生不同的效果。a:link-默認(rèn)鏈接樣式a:visited-已訪問鏈接樣式a:hover-鼠標(biāo)懸停樣式a:active-鼠標(biāo)點(diǎn)擊樣式最后寫下關(guān)于JS控制內(nèi)聯(lián)樣式帶!important的現(xiàn)象:看下正常的Demo1:??1??2?div{background:?red?!important;?height:20px;}?3?#demo1{

5、?background:?green;}?4?.demo1{?background:blue;}?5??1?

12document.getElementById("demo1").style.background="black";?3?最終顯示背景為紅色,這應(yīng)該不會有什么問題,!important放到哪都會改變優(yōu)先級的,而后面的JS代碼也不會改變優(yōu)先級。另外一個(gè)D

6、emo2:1?2?div{background:?red?!important;?height:200px;}3?#demo2{?background:?green;}4?.demo2{?background:?blue;}5?6??1?

1?2?document.getElementById("demo2").st

7、yle.background="black";3?IE6,7???????顯示?紅色FF2+???????顯示?黃色Opera9+??顯示?紅色Safari??????顯示?黃色Demo3:1?2?div{background:?red?!important;?height:200px;}3?#demo3{?background:?green;}4?.demo3{?background:?blue;}5

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時(shí)可能會顯示錯(cuò)亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時(shí)聯(lián)系客服。
3. 下載前請仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請聯(lián)系客服處理。
相關(guān)標(biāo)簽