CSS選擇器與最佳實踐

原文: 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