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

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


          例一:

           
          CSS

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


          HTML

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


                    這個例子應(yīng)該是大家經(jīng)常見到的important的用法了,在IE環(huá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的字體色為藍色,不同的是,第二行末使用important,而第三行使用了!

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

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

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

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

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

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

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

                   然而,不管怎么樣,IE的這一大BUG幫助我們解決了很多兼容性問題,這顯然不是件壞事!
                   
          posted on 2006-03-09 03:19 Raven 閱讀(7111) 評論(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;
          }
          這時候的效果就和上面說的不一樣了。這個時候字體顏色都是藍色!并沒有體現(xiàn)出優(yōu)先級?。?nbsp; 回復  更多評論
            
          # re: important終級講解 2006-03-11 03:59 | Raven
          你知道#box div{...}這樣寫的含義嗎?

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

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

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

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

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

          請說明是哪里錯了。  回復  更多評論
            
          # re: important終級講解 2009-10-31 11:27 | yytt
          確實是Box"與css中的box首字母不一樣,倒至例子不能功,支持作者  回復  更多評論
            
          # re: important終級講解 2009-11-27 09:40 | 68
          importan不打了結(jié)  回復  更多評論
            
          # re: important終級講解 2009-11-27 09:41 | wow
          不錯 收藏 謝謝  回復  更多評論
            
          # re: important終級講解 2010-11-03 17:13 | Freetao
          個人認為,!important 聲明,除非必須,盡量少用。  回復  更多評論
            
          # re: important終級講解 2011-06-08 13:07 | jj
          ie8好像是能識別important的,這樣反而不好設(shè)置各個瀏覽器的顯示樣式了,怎么辦呢?  回復  更多評論
            
          # re: important終級講解 2011-12-09 23:45 | FEer
          id 大小寫@xinfan
            回復  更多評論
            
          # re: important終級講解 2011-12-09 23:51 | FEer
          1.第一個實例是不完全正確的,在IE7,8下面顯示的是紅色.
          2.第二個實例的ID大小寫問題.
          3.最后一句話沒有明白什么意思!
            回復  更多評論
            
          <2011年6月>
          2930311234
          567891011
          12131415161718
          19202122232425
          262728293012
          3456789

          常用鏈接

          留言簿(3)

          隨筆分類

          隨筆檔案

          友情鏈接

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 望都县| 神木县| 华坪县| 玛曲县| 新化县| 乌鲁木齐县| 临江市| 武功县| 宿迁市| 广东省| 理塘县| 称多县| 萍乡市| 修武县| 安图县| 瑞安市| 浦北县| 揭东县| 民权县| 垦利县| 洞头县| 伽师县| 松潘县| 衢州市| 襄垣县| 甘孜县| 铜陵市| 天峻县| 石狮市| 竹北市| 夏邑县| 和田市| 遂川县| 潞西市| 固安县| 阳新县| 江津市| 平武县| 拜城县| 山阳县| 麦盖提县|