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

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


          例一:

           
          CSS

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


          HTML

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


                    這個例子應該是大家經常見到的important的用法了,在IE環境下,這行字是藍色,在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代碼第一行設定了box里面所有div中字體色為紅色,第二行和第三行都用class重新定義了自身div的字體色為藍色,不同的是,第二行末使用important,而第三行使用了!

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

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

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

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

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

                  通過上邊兩個例子,得以總結:

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

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

          評論:
          # re: important終級講解 2006-03-10 14:07 | 感恩的心
          剛才試了試,第二個例子卻和上面說的不一樣,找了一會才發現原來是這樣:
          原來的
          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;
          }
          這時候的效果就和上面說的不一樣了。這個時候字體顏色都是藍色!并沒有體現出優先級啊?  回復  更多評論
            
          # re: important終級講解 2006-03-11 03:59 | Raven
          你知道#box div{...}這樣寫的含義嗎?

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

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

          優先級是體現在,同一元素多次渲染的前提上,所以,你把div卻了,這兩個div上只有class的定義,不存在“多次”,也就不存在"優先級"了!
            回復  更多評論
            
          # re: important終級講解 2006-03-11 09:05 | h
          hao  回復  更多評論
            
          # re: important終級講解 2006-12-07 20:35 | 蟲子
          IE7已經修復了這個缺陷,也就是現在的IE7,FF2.0,FF3.0等在這個問題上是在同一起跑線上!
          既然IE和FF的盒子模型有區別,這樣一來,反而不好區分開進行定義了!
          那不是很郁悶。我的頁面布局在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首字母不一樣,應同為大寫或小寫。  回復  更多評論
            
          # 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
          這篇文章雖然是我三年前寫的,同時也發到藍色理想相關論壇。至少目前為止,您是第一個提出它是錯誤的,很愿意與您就此問題學習。

          請說明是哪里錯了。  回復  更多評論
            
          # re: important終級講解 2009-10-31 11:27 | yytt
          確實是Box"與css中的box首字母不一樣,倒至例子不能功,支持作者  回復  更多評論
            
          # re: important終級講解 2009-11-27 09:40 | 68
          importan不打了結  回復  更多評論
            
          # 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的,這樣反而不好設置各個瀏覽器的顯示樣式了,怎么辦呢?  回復  更多評論
            
          # re: important終級講解 2011-12-09 23:45 | FEer
          id 大小寫@xinfan
            回復  更多評論
            
          # re: important終級講解 2011-12-09 23:51 | FEer
          1.第一個實例是不完全正確的,在IE7,8下面顯示的是紅色.
          2.第二個實例的ID大小寫問題.
          3.最后一句話沒有明白什么意思!
            回復  更多評論
            
          主站蜘蛛池模板: 黄陵县| 东明县| 濉溪县| 昌乐县| 汝城县| 平遥县| 都匀市| 凤翔县| 合阳县| 天气| 马鞍山市| 和田县| 高清| 凤山市| 博野县| 三河市| 红桥区| 乌兰浩特市| 丹阳市| 北辰区| 桂东县| 当涂县| 鞍山市| 高台县| 三亚市| 海安县| 宁夏| 酉阳| 涪陵区| 通辽市| 定日县| 镇江市| 古浪县| 贵溪市| 祁东县| 德钦县| 高台县| 青海省| 新巴尔虎右旗| 石景山区| 东乡县|