隨筆-9  評論-49  文章-0  trackbacks-0

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


          例一:

           
          CSS

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


          HTML

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


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

          例二:

          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)先級小于id,所以,第二行中即使用class重定義了自身樣式,也無法生效,所以繼承父級屬性,這行字還是紅色!

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

                   從這個例子,得以證明,ie對important的并不是不支持!

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

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

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

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

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

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

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

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

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

          你第二個例子講的完全就是錯的

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

          請說明是哪里錯了。  回復(fù)  更多評論
            
          # re: important終級講解 2009-10-31 11:27 | yytt
          確實是Box"與css中的box首字母不一樣,倒至例子不能功,支持作者  回復(fù)  更多評論
            
          # re: important終級講解 2009-11-27 09:40 | 68
          importan不打了結(jié)  回復(fù)  更多評論
            
          # re: important終級講解 2009-11-27 09:41 | wow
          不錯 收藏 謝謝  回復(fù)  更多評論
            
          # re: important終級講解 2010-11-03 17:13 | Freetao
          個人認(rèn)為,!important 聲明,除非必須,盡量少用。  回復(fù)  更多評論
            
          # re: important終級講解 2011-06-08 13:07 | jj
          ie8好像是能識別important的,這樣反而不好設(shè)置各個瀏覽器的顯示樣式了,怎么辦呢?  回復(fù)  更多評論
            
          # re: important終級講解 2011-12-09 23:45 | FEer
          id 大小寫@xinfan
            回復(fù)  更多評論
            
          # re: important終級講解 2011-12-09 23:51 | FEer
          1.第一個實例是不完全正確的,在IE7,8下面顯示的是紅色.
          2.第二個實例的ID大小寫問題.
          3.最后一句話沒有明白什么意思!
            回復(fù)  更多評論
            
          主站蜘蛛池模板: 顺昌县| 普安县| 萝北县| 乃东县| 华亭县| 天气| 临邑县| 柞水县| 繁昌县| 钟祥市| 昌图县| 姜堰市| 永定县| 天水市| 霍林郭勒市| 昌吉市| 临夏市| 铜山县| 饶阳县| 南开区| 疏附县| 华蓥市| 福鼎市| 乐亭县| 灵台县| 景德镇市| 广德县| 景洪市| 兴化市| 双柏县| 鄂托克前旗| 长海县| 永川市| 文安县| 古丈县| 金华市| 灵宝市| 巧家县| 库尔勒市| 浮山县| 本溪市|