css 樣式加載的優(yōu)先級(jí)使用經(jīng)驗(yàn)分享
發(fā)布時(shí)間：2013-08-29 17:39:33 作者：佚名 
我要評(píng)論
我要評(píng)論使用!important可以改變優(yōu)先級(jí)別為最高，其次是style對(duì)象，然后是id class tag ，另外，另外在同級(jí)樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級(jí)。感興趣的朋友可以了解下
昨天項(xiàng)目開發(fā)過(guò)程中，遇到一個(gè)樣式加載優(yōu)先級(jí)的問(wèn)題。
定義了class，在頁(yè)面最初加載的過(guò)程中是被識(shí)別出來(lái)了，當(dāng)加載完畢后的一瞬間，樣式像被重寫了一樣，定義好的margin-bottom不起作用了?？丶?yàn)闆](méi)有這個(gè)樣式就擠在了一起。
測(cè)試中FF和Chrome都是可以的，IE8有問(wèn)題，但是用IE developer工具是可以看到這個(gè)margin-bottom被識(shí)別出來(lái)了，也沒(méi)有被重定義。
問(wèn)題比較怪異。
這個(gè)頁(yè)面不是普通的結(jié)構(gòu)，頁(yè)面內(nèi)容是異步生成的，而不是之前已經(jīng)寫好各種元素的普通頁(yè)面。至于在加載完的一瞬間是被什么給重定義了還沒(méi)有找到原因?，F(xiàn)象是其中的擠在一起的表單元素隨便點(diǎn)擊一個(gè)，它所在的模塊的所有表單都會(huì)加載margin-bottom樣式，就不會(huì)再擠在一起?；蛘哂肐E developer工具，先把margin-bottom前面的勾點(diǎn)擊為不選，然后再點(diǎn)擊選中，這樣頁(yè)面上所有沒(méi)有識(shí)別margin-bottom的表單元素都會(huì)正常加載這個(gè)樣式。
但這肯定不是解決問(wèn)題的辦法，不能讓客戶看到這個(gè)問(wèn)題，UI是最能打動(dòng)用戶的部分，也是最容易激怒用戶的部分。
隨后試了幾種方法，專門寫一個(gè)樣式定義margin-bottom，而不是隨著別的定義一起，不行；
加!important這種優(yōu)先級(jí)很高的辦法也不行；
直接寫style優(yōu)先級(jí)還不如!important，并且代碼冗余太多，弊端更多，不行；
然后試了一個(gè)方法，script的方法，可行，代碼如下：
<script type="text/javascript">
document.getElementByClassName("mar_b_10").style.margin-bottom="10px";
</script>
其實(shí)就是再聲明一遍，跟class是同樣的內(nèi)容，瀏覽器就能識(shí)別了。JS控制的樣式對(duì)象，document.getElementByClassName("mar_b_10").style.margin-bottom="10px";一般情況是JS控制的樣式優(yōu)先級(jí)高，因?yàn)橥鵇OM操作是在DOM樹加載完畢之后。在DOM樹加載完畢，這個(gè)時(shí)候我寫了js進(jìn)行重定義，就沒(méi)有別的再對(duì)這次樣式定義進(jìn)行覆蓋，結(jié)果就比較滿意。
一般情況下：
[1位重要標(biāo)志位] > [4位特殊性標(biāo)志] > 聲明先后順序
!important > [ 內(nèi)聯(lián)樣式 > ID選擇器 > 類，屬性，偽類 選擇器 > 元素標(biāo)簽，偽元素 選擇器 ]
使用!important可以改變優(yōu)先級(jí)別為最高，其次是style對(duì)象，然后是id > class >tag ，另外，另外在同級(jí)樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級(jí)。
定義了class，在頁(yè)面最初加載的過(guò)程中是被識(shí)別出來(lái)了，當(dāng)加載完畢后的一瞬間，樣式像被重寫了一樣，定義好的margin-bottom不起作用了?？丶?yàn)闆](méi)有這個(gè)樣式就擠在了一起。
測(cè)試中FF和Chrome都是可以的，IE8有問(wèn)題，但是用IE developer工具是可以看到這個(gè)margin-bottom被識(shí)別出來(lái)了，也沒(méi)有被重定義。
問(wèn)題比較怪異。
這個(gè)頁(yè)面不是普通的結(jié)構(gòu)，頁(yè)面內(nèi)容是異步生成的，而不是之前已經(jīng)寫好各種元素的普通頁(yè)面。至于在加載完的一瞬間是被什么給重定義了還沒(méi)有找到原因?，F(xiàn)象是其中的擠在一起的表單元素隨便點(diǎn)擊一個(gè)，它所在的模塊的所有表單都會(huì)加載margin-bottom樣式，就不會(huì)再擠在一起?；蛘哂肐E developer工具，先把margin-bottom前面的勾點(diǎn)擊為不選，然后再點(diǎn)擊選中，這樣頁(yè)面上所有沒(méi)有識(shí)別margin-bottom的表單元素都會(huì)正常加載這個(gè)樣式。
但這肯定不是解決問(wèn)題的辦法，不能讓客戶看到這個(gè)問(wèn)題，UI是最能打動(dòng)用戶的部分，也是最容易激怒用戶的部分。
隨后試了幾種方法，專門寫一個(gè)樣式定義margin-bottom，而不是隨著別的定義一起，不行；
加!important這種優(yōu)先級(jí)很高的辦法也不行；
直接寫style優(yōu)先級(jí)還不如!important，并且代碼冗余太多，弊端更多，不行；
然后試了一個(gè)方法，script的方法，可行，代碼如下：
復(fù)制代碼
代碼如下:<script type="text/javascript">
document.getElementByClassName("mar_b_10").style.margin-bottom="10px";
</script>
其實(shí)就是再聲明一遍，跟class是同樣的內(nèi)容，瀏覽器就能識(shí)別了。JS控制的樣式對(duì)象，document.getElementByClassName("mar_b_10").style.margin-bottom="10px";一般情況是JS控制的樣式優(yōu)先級(jí)高，因?yàn)橥鵇OM操作是在DOM樹加載完畢之后。在DOM樹加載完畢，這個(gè)時(shí)候我寫了js進(jìn)行重定義，就沒(méi)有別的再對(duì)這次樣式定義進(jìn)行覆蓋，結(jié)果就比較滿意。
一般情況下：
[1位重要標(biāo)志位] > [4位特殊性標(biāo)志] > 聲明先后順序
!important > [ 內(nèi)聯(lián)樣式 > ID選擇器 > 類，屬性，偽類 選擇器 > 元素標(biāo)簽，偽元素 選擇器 ]
使用!important可以改變優(yōu)先級(jí)別為最高，其次是style對(duì)象，然后是id > class >tag ，另外，另外在同級(jí)樣式按照申明的順序后出現(xiàn)的樣式具有高優(yōu)先級(jí)。
相關(guān)文章
- 作為一個(gè)Web開發(fā)者，掌握必要的前臺(tái)技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級(jí)問(wèn)題，為了廣大web愛(ài)好者可以更好的解決問(wèn)題，這里就CSS選擇器的優(yōu)先級(jí)問(wèn)題做了一些總結(jié)2013-08-01
CSS控制樣式的三種方式(優(yōu)先級(jí)對(duì)比驗(yàn)證)
大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時(shí)候，有三種引入方式,這里簡(jiǎn)單介紹下CSS控制樣式的三種方式2013-07-22CSS優(yōu)先級(jí)的相關(guān)知識(shí)詳細(xì)介紹
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級(jí)，那么就會(huì)有一個(gè)規(guī)則來(lái)約定這個(gè)優(yōu)先級(jí)，而這個(gè)“規(guī)則”就是本次所需要講的重點(diǎn)2013-04-22網(wǎng)頁(yè)css優(yōu)先級(jí)為您詳細(xì)解讀
所謂CSS優(yōu)先級(jí)，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡(jiǎn)稱，我們能通過(guò)CSS為文檔設(shè)置豐富且易于修改的外觀2013-04-19- css樣式優(yōu)先級(jí)是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個(gè)問(wèn)題貌似一直存在我們身邊卻一直無(wú)從選擇，接下來(lái)用實(shí)例為大家說(shuō)明下，到底哪個(gè)高點(diǎn)，2013-03-14
CSS層疊樣式表之CSS解析機(jī)制的優(yōu)先級(jí)及樣式覆蓋問(wèn)題探討
多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使多重樣式的情況.有個(gè)例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則2013-02-01CSS優(yōu)先級(jí)和!important與IE6的BUG討論及解決方案
本來(lái)我對(duì)他誰(shuí)的ie6不支持!important也沒(méi)什么異議，可是正好在前幾天正好用個(gè)這個(gè)!important屬性解決了一個(gè)樣式優(yōu)先級(jí)的問(wèn)題，而且是支持ie6的，這是為什么呢？到底ie6支不2013-01-23IE6下CSS多類選擇符優(yōu)先級(jí)不起作用的bug分析及解決方法
IE6，這個(gè)前端開發(fā)的夢(mèng)魘總是在你不經(jīng)意的時(shí)候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級(jí)不起作用，多么的令人氣憤啊，經(jīng)過(guò)測(cè)試：IE6下這種類組合的優(yōu)先級(jí)不如單個(gè)類， 感2013-01-23- css樣式的優(yōu)先級(jí)是一個(gè)龐雜的知識(shí)點(diǎn)，我甚至覺(jué)得它的龐雜可以與“浮動(dòng)”以及“框模型”相提并論,今天就利用點(diǎn)時(shí)間把我所了解的寫下來(lái)，大家共同進(jìn)步2013-01-11
- css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級(jí),這會(huì)給正在解決優(yōu)先級(jí)問(wèn)題的朋友，帶來(lái)些許幫助2012-12-04