樣式的層級關係,選擇器優先級,樣式衝突

1、樣式的層級關係:一個是權重,另一個就是共用樣式和私用樣式了,比如說兩個ul,它們的子元素除了背景色之外都一樣,那可以直接用li {}來定義相同的公用樣式,用 .ul_1 li {} , .ul_2 li {} 來定義不相同的樣式。可以根據元素之間的差別來選擇用哪種方法。推薦用多層級的方式書寫css選擇器。


2、選擇器優先級:(!important>)id選擇器>class選擇器(屬性選擇器/僞類選擇器)>標籤選擇器(僞元素選擇器) 同類選擇符條件下層級越多的優先級越高。優先級就近原則,同權重情況下樣式定義最近者爲準。載入樣式以最後載入的定位爲準。


3、樣式衝突:   如果同個元素有兩個或以上衝突的CSS規則,瀏覽器有一些基本的規則來決定哪一個非常特殊而勝出。
        選擇器一樣的情況下後面的會覆蓋前面的屬性。
        使用嵌套選擇器時:
          一組嵌套選擇器的實際特性可以計算出來。基本的,使用ID選擇器的值是100,使用class選擇器的值是10,每個html選擇器的值是1。它們加起來就可以計算出特性的值。
          p的特性是1(一個html選擇器)
          div p的特性是2(兩個html選擇器)
          .tree的特性是10(1個class選擇器)
          div p.tree的特性是1+1+10=12,(兩個html選擇器,一個class選擇器)
          #baobab的特性是100(1個ID選擇器)
          body #content .alternative p的特性是112(兩個html選擇器,一個ID選擇器,一個類選擇器)

            基本上,一個選擇器越多特性,樣式衝突的時候將顯示它的樣式。


4、抽離樣式模塊
    因爲瀏覽器的兼容問題,不同瀏覽器對有些標籤的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
        最簡單的初始化方法: * {padding: 0; margin: 0;} (強烈不建議)


        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{ font-size:100%; }
        address, cite, dfn, em, var { font-style:normal; }
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
        small{ font-size:12px; }
        ul, ol { list-style:none; }
        a { text-decoration:none; }
        a:hover { text-decoration:underline; }
        sup { vertical-align:text-top; }
        sub{ vertical-align:text-bottom; }
        legend { color:#000; }
        fieldset, img { border:0; }
        button, input, select, textarea { font-size:100%; }
        table { border-collapse:collapse; border-spacing:0; }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章