隨筆-9  評(píng)論-49  文章-0  trackbacks-0

                很多人,包括很多網(wǎng)站(我所見過的所有網(wǎng)站,包括國內(nèi)著名的‘網(wǎng)頁設(shè)計(jì)師’網(wǎng)站),都說important是不被IE所支持和認(rèn)識(shí)的,可是真的是這樣嗎?看了下邊的兩個(gè)例子,也許你會(huì)改變一些看法!


          例一:

           
          CSS

          #box {
               color:red !important;
               color:blue;
           }


          HTML

          <div id="Box"> 在不同的瀏覽器下,這行字的色應(yīng)該不同!</div>


                    這個(gè)例子應(yīng)該是大家經(jīng)常見到的important的用法了,在IE環(huán)境下,這行字是藍(lán)色,在firefox下,為紅色,其用法不再多說了,看下一個(gè)例子。

          例二:

          CSS

          1 #box div{
               color:red;
           }
          2 .important_false{
               color:blue;
          }
          3.important_true{
               color:blue !important;
          }

          HTML
          <div id="Box">
              
          <div class="important_false">這一行末使用important</div>
              
          <div class="important_true">這一行使用了important</div>
          </div>

           
                   例二中,CSS代碼第一行設(shè)定了box里面所有div中字體色為紅色,第二行和第三行都用class重新定義了自身div的字體色為藍(lán)色,不同的是,第二行末使用important,而第三行使用了!

                   默認(rèn)情況下,class的優(yōu)先級(jí)小于id,所以,第二行中即使用class重定義了自身樣式,也無法生效,所以繼承父級(jí)屬性,這行字還是紅色!

                   但是,第三行中,用了important提升優(yōu)先級(jí)(或看成強(qiáng)制重定義),所以這里的css得以生效,這行字變?yōu)榱怂{(lán)色!

                   從這個(gè)例子,得以證明,ie對(duì)important的并不是不支持!

                      
          那么為什么很多人都說ie不認(rèn)識(shí)它呢?我想應(yīng)該是大家實(shí)戰(zhàn)中可能都沒有遇到例子中的情況: 當(dāng)你想提升class的優(yōu)先級(jí)時(shí)怎么辦?

                     也就是說大家可能都忽略了它的這一作用,只了解在命名為同一個(gè)元素的CSS代碼塊中,用它來提升排列順序相對(duì)靠前的代碼的優(yōu)先級(jí)(例一)!

                  通過上邊兩個(gè)例子,得以總結(jié):

                  important對(duì) 一個(gè)良好(或者是標(biāo)準(zhǔn))的瀏覽器來說,不僅僅是從順序上提升代碼的優(yōu)先級(jí),還可以用來提升class的優(yōu)先級(jí)(比如firefox),但是從IE對(duì)前者的不支持可以看出,這只是IE的一大BUG,而不能說它“不認(rèn)識(shí)、不支持”!

                   然而,不管怎么樣,IE的這一大BUG幫助我們解決了很多兼容性問題,這顯然不是件壞事!
                   
          posted on 2006-03-09 03:19 Raven 閱讀(7106) 評(píng)論(20)  編輯  收藏 所屬分類: XHTML/CSS

          評(píng)論:
          # re: important終級(jí)講解 2006-03-10 14:07 | 感恩的心
          剛才試了試,第二個(gè)例子卻和上面說的不一樣,找了一會(huì)才發(fā)現(xiàn)原來是這樣:
          原來的
          1 #box div{
          color:red;
          }
          2 .important_false{
          color:blue;
          }
          3.important_true{
          color:blue !important;
          }
          比下面寫的多了一個(gè)“div”!
          #box {
          color:red;
          }
          .important_false{
          color:blue;
          }
          .important_true{
          color:blue !important;
          }
          這時(shí)候的效果就和上面說的不一樣了。這個(gè)時(shí)候字體顏色都是藍(lán)色!并沒有體現(xiàn)出優(yōu)先級(jí)啊?  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2006-03-11 03:59 | Raven
          你知道#box div{...}這樣寫的含義嗎?

          是指,文檔中,以box為ID的元素下邊的所有標(biāo)簽名為div的元素!也就是說,它并不是來給box賦樣式,而是給box下的那兩個(gè)div賦樣式!(讓它倆的字為紅色)

          而你把div去了,那就是說這次是給box賦樣式了,那么下面的div根本沒有指定任何樣式,所以按css的規(guī)定,靠近元素最近的樣式將生效!

          優(yōu)先級(jí)是體現(xiàn)在,同一元素多次渲染的前提上,所以,你把div卻了,這兩個(gè)div上只有class的定義,不存在“多次”,也就不存在"優(yōu)先級(jí)"了!
            回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2006-03-11 09:05 | h
          # re: important終級(jí)講解 2006-12-07 20:35 | 蟲子
          IE7已經(jīng)修復(fù)了這個(gè)缺陷,也就是現(xiàn)在的IE7,F(xiàn)F2.0,FF3.0等在這個(gè)問題上是在同一起跑線上!
          既然IE和FF的盒子模型有區(qū)別,這樣一來,反而不好區(qū)分開進(jìn)行定義了!
          那不是很郁悶。我的頁面布局在IE和FF總是有那么1-2個(gè)PX的差異,頭大了!  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2006-12-13 12:46 | xinfan
          奇怪,為什么我試了下,在IE6和firefox2.0 字體顯示的都是藍(lán)色??  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2007-04-18 02:49 | Raven
          @蟲子
          ie7 bate1仍然存在這個(gè)問題,也就是說,本篇文章適用于IE7 bate1-  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2007-12-21 10:29 | yin
          div的ID "Box"與css中的box首字母不一樣,應(yīng)同為大寫或小寫。  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-06-27 16:12 | wenpeng sun
          作者很有心,認(rèn)真學(xué)習(xí)了,謝謝  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-10-23 02:53 | momo's
          我很無語

          你第二個(gè)例子講的完全就是錯(cuò)的

            回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-10-23 03:15 | momo's
          那就對(duì)了@xinfan
            回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-10-25 22:35 | LeaChar
          看到文章,我在佩服作者;
          看到評(píng)論,我在思考自己。  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-10-28 00:38 | Raven
          @momo's
          這篇文章雖然是我三年前寫的,同時(shí)也發(fā)到藍(lán)色理想相關(guān)論壇。至少目前為止,您是第一個(gè)提出它是錯(cuò)誤的,很愿意與您就此問題學(xué)習(xí)。

          請(qǐng)說明是哪里錯(cuò)了。  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-10-31 11:27 | yytt
          確實(shí)是Box"與css中的box首字母不一樣,倒至例子不能功,支持作者  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-11-27 09:40 | 68
          importan不打了結(jié)  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2009-11-27 09:41 | wow
          不錯(cuò) 收藏 謝謝  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2010-11-03 17:13 | Freetao
          個(gè)人認(rèn)為,!important 聲明,除非必須,盡量少用。  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2011-06-08 13:07 | jj
          ie8好像是能識(shí)別important的,這樣反而不好設(shè)置各個(gè)瀏覽器的顯示樣式了,怎么辦呢?  回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2011-12-09 23:45 | FEer
          id 大小寫@xinfan
            回復(fù)  更多評(píng)論
            
          # re: important終級(jí)講解 2011-12-09 23:51 | FEer
          1.第一個(gè)實(shí)例是不完全正確的,在IE7,8下面顯示的是紅色.
          2.第二個(gè)實(shí)例的ID大小寫問題.
          3.最后一句話沒有明白什么意思!
            回復(fù)  更多評(píng)論
            
          主站蜘蛛池模板: 建始县| 庆阳市| 迁安市| 江油市| 洪雅县| 盖州市| 聂拉木县| 漠河县| 繁峙县| 开封县| 东丽区| 定南县| 汝南县| 贺州市| 彰化市| 微博| 怀化市| 古交市| 岢岚县| 吴桥县| 栾城县| 新巴尔虎右旗| 杨浦区| 四子王旗| 铁岭市| 同德县| 襄城县| 大同县| 九龙坡区| 丽水市| 谢通门县| 山东省| 博乐市| 永泰县| 达孜县| 闻喜县| 西林县| 平谷区| 河曲县| 胶州市| 京山县|