選擇器類型介紹:(主要)
1.id選擇器:css中以「#」來定義,不能以數字開頭,不然在mozilla/firefox瀏覽器不起做用。css
2.類選擇器:css中以"."來定義,不能以數字開頭。瀏覽器
3.元素選擇器(又叫標籤選擇器):如 p{......}, ul li a{......}優化
選擇器優先級規則
如下順序逐漸遞增:spa
通用選擇器(*)firefox
元素選擇器(類型選擇器,標籤選擇器)插件
類選擇器調試
屬性選擇器code
僞類:繼承
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}it
ID選擇器
內聯樣式
CSS 優先級法則:
- A 選擇器都有一個權值,權值越大越優先;
- B 當權值相等時,後出現的樣式表設置要優於先出現的樣式表設置;
- C 創做者的規則高於瀏覽者:即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式;
- D 繼承的CSS 樣式不如後來指定的CSS 樣式;
- E 在同一組屬性設置中標有"!important"規則的優先級最大;
CSS權重關係圖:
樣式表種類:
1.內聯樣式表:通常不推薦使用這種方式,例如當一個樣式僅須要在一個元素上使用一次的時候
2.內部樣式表:經過在head頭部中使用<style></style>添加, 將樣式直接寫在其中
3.外部樣式表:經過<link href="XXX.css">引入css文件
優先級規則:
1.假如一個元素的某些屬性同時在多個不一樣的樣式表中被一樣的選擇器定義,那麼它們的最終樣式取決於更具體詳細的那個樣式表
2.假如擁有內部樣式表的同時連接了外部樣式表,那麼這個頁面的樣式:顏色屬性繼承於外部樣式表,文字排版繼承於內部樣式表
3.內聯樣式>內部樣式>外部樣式>瀏覽器默認樣式
4.若是將外部樣式放在內部樣式後面,那麼內部樣式將被覆蓋
!important 規則例外
當 !important 規則被應用在一個樣式聲明中時,該樣式聲明會覆蓋CSS中任何其餘的聲明, 不管它處在聲明列表中的哪裏. 儘管如此, !important規則仍是與優先級毫無關係.使用 !important 不是一個好習慣,由於它改變了你樣式表原本的級聯規則,從而使其難以調試。
一些經驗法則:
- Always 要優化考慮使用樣式規則的優先級來解決問題而不是
!important
- Only 只在須要覆蓋全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定頁面中使用
!important
- Never 永遠不要在全站範圍的 css 上使用
!important
- Never 永遠不要在你的插件中使用
!important