CSS選擇器與最佳實踐

有效且結構良好的文檔爲我們要應用的樣式提供了一個框架,但將CSS樣式應用於特定的HTML元素,需要找到該元素。在CSS中,執行該任務的樣式規則稱爲選擇器。在本文,你可以學習到:

  • CSS選擇器
  • CSS層疊和特殊性
  • CSS繼承
  • CSS實踐

現在一起開啓CSS的奇妙之旅吧!

1. CSS選擇器

CSS選擇器包括:

  • 類型選擇器(也成爲元素選擇器),比如:p, ul, li, h1

  • 後代選擇器(用於尋找特定元素或者元素組的後代,由其他兩個選擇器中間的空格表示)如下所示

    •   ul a {color: red;} # 表示ul的後代的a元素, 其他a元素不受影響
      
  • ID選擇器和類選擇器(分別用“#” 和"."表示)

  • 僞類,如:link, :visited稱爲鏈接僞類,只應用於錨元素。:hover, :active, :focus被稱爲動態僞類,理論上可應用於任何元素(IE6只注意應用於錨元素的:link, :visited完全忽略:focus;IE7任何元素都支持:hover,但是忽略:active,:focus)

  • 僞元素選擇器,包括:before, :after,:first-letter,:first-line。

  • 通用選擇器(*),其作用就像通配符,它匹配所有可用元素。

  • 高級選擇器(IE6和更低版本不支持)

    • 子選擇器:選擇元素的直接後代,示例:

      •   ul > li {font-size:20px;} #對於子選擇器 如果父元素和子元素之間有註釋,IE7中會出問題。
        
    • 相鄰同胞選擇器:根據相鄰關係應用樣式,示例:

      •   shuh2 + p {font-size:1.2em;} # 對h2元素後的第一個p元素應用樣式
          						  # 在目標元素之間有註釋,IE7也會有問題
        
    • 同胞選擇器:選擇某元素的同胞元素,示例

      •   /* 設置同一父元素下的 p 元素之後的每一個 ul 元素的背景顏色
             要想在 IE8 及其之前的版本中使用這個選擇器,必須聲明 <!DOCTYPE>。
          */
          p~ul {
          	background:#ff0000;
          }
        
    • 屬性選擇器:根據某個屬性是否存在或者屬性的值選擇元素。示例:

      •   # 具有title屬性的a元素,字體爲紅色
          a[title] {color:red;} 
          
          # rel屬性值爲”nofollow“的a元素,字體爲藍色
          a[rel="nofollow"] {color: blue;} 
          
          # 屬性值有多個值,包含指定值的title屬性的元素樣式的例子,使用(~)分隔屬性和值;
          p[title~=hello] { color:blue; } 
          
          #屬性值組成中包含指定值的lang屬性的元素樣式的例子,使用(|)分隔屬性和值
          p[lang|=en] { color:blue; }
          
          ...... # 還有諸如^=的屬性選擇器,有興趣可去查詢,雖然一般並不會運用。
        

2. 層疊和特殊性

在一個樣式表中,尋找同一個元素可能有多個規則。CSS通過層疊的過程處理這種衝突。層疊給每一個規則分配一個重要度,層疊的重要度次序如下:

  • 標有!important 的用戶樣式
  • 標有!important 的作者樣式
  • 作者樣式
  • 用戶樣式
  • 瀏覽器/用戶代理應用的樣式

然後,根據選擇器的特殊性決定規則的次序。具有更特殊選擇器的規則優先於具有一般選擇器的規則。如果兩個規則的特殊性相同,後定義的優先。

2.1 特殊性

規則的特殊性基於選擇器的特殊性。爲了計算規則的特殊性,給每種選擇器都分配一個數值。然後,將規則的每個選擇器的值加在一起,計算出規則的特殊性。選擇器的特殊性分爲四個等級:a,b,c,d

  • 如果是行內樣式,即元素的style屬性中的規則,a=1

  • b等於ID選擇器的總數

  • c等於類,僞類,和屬性選擇器的數量

  • d等於類型選擇器和僞元素選擇器的數量

  • 通配符和結合符特殊性最低,爲0

示例:

選擇器 特殊性 以10爲基數的特殊性
style="" 1,0,0,0 1000
container #nav {} 0,2,0,0 200
container .banner {} 0,1,1,0 110
p.commited {} 0,0,1,1 11
p {} 0,0,0,1 1

雖然這裏給出了每個類型選擇器的特殊性的數值,但是基本上,用style屬性編寫的規則總比其他任何規則特殊。具有ID選擇器的規則比沒有ID選擇器的規則特殊,具有類選擇器的規則比只有類型選擇器的規則特殊。最後,當兩個規則的特殊性相同,那麼後定義的規則優先。

3. 繼承

繼承和層疊雖然初看上有點相似但是概念實際上不太一樣。繼承是一個比較容易理解的概念。應用樣式的元素的後代會繼承樣式的某些屬性,比如顏色和字號。如果將主體的字號設置爲1.4em,那麼頁面上的所有內容應該也會繼承這個字號(windows的IE在繼承表格字號方面有問題,需要在表格單獨設置字號或者指定表格應該繼承字號)。

如果在主體上設置字號,我們會發現頁面上的標題沒有采用這個字號,這是由於瀏覽器的默認樣式表設置了標題字號,直接應用於元素的任何樣式表總會覆蓋繼承而來的樣式(繼承而來的樣式的特殊性爲空)。

繼承這一特性十分有用,可以使得開發人員不必在元素的後代上添加相同的樣式。正如恰當的使用層疊可以簡化CSS,恰當的使用繼承也可以減少代碼中選擇器的數量和複雜性。

4. CSS最佳實踐

該小結將提供一些本人寫CSS的最佳實踐,覺得不錯可以納入自己的知識體系。

  • 當規則包含多個選擇器,每個選擇器聲明獨佔一行

  • >+,~選擇器的兩邊各保留一個空格

  • 每個屬性聲明末尾加分號

  • 在url中使用雙引號,屬性選擇器的屬性值也使用雙引號

  • 單個屬性聲明不換行

  • 不爲id選擇器、類選擇器添加類型選擇器進行限定(對性能和維護都有影響,位置靠後的限定條件應該儘可能精確)

    •   /* 不推薦 */
        p .articel { width:100px; }
        
        /* 推薦 */
        
        .article { width:100px; }
        
      
  • 選擇器的嵌套層級應不大於3層

  • 鼠標手型

    • 用戶可以點擊的盒子聲明cursor:pointer;以顯示手型
    • 圖片放大縮小 cursor:zoom-in , cursor:zoom-out
  • 左右浮動分離

  • 不適用‘*’選擇器

  • 屬性值0後面不加單位

  • 正確使用display屬性

    • display: inline後不應該再使用 width、height、margin、padding 以及 float;
    • display: inline-block 後不應該再使用 float;
    • display: block 後不應該再使用 vertical-align;
    • display: table-* 後不應該再使用 margin 或者 float;
    • 儘量少用float
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章