有效且結構良好的文檔爲我們要應用的樣式提供了一個框架,但將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