標籤：c style class a ext color
又翻了一下之前的讀書筆記，再重溫了忘掉的細節。最近一年的工作，由於有重構崗位的同學負責CSS的編寫，雖說還是接觸到，但畢竟不寫好久了，有些東西還是忘記了，例如選取器的權重計算細節。這個筆記只是部分，後半部分快速探索了，沒寫筆記。
1、元素命名規則
- 類名或者ID以元素是做什麼的來命名，不要以元素的外觀表現來命名。
- 類名或者ID全部小寫，並用連字號號或許底線分隔。（.add-class）
2、偽類
- 連結偽類： :link和:visited
- 動態為例： :hover :active :focus
-
- 設定:fouces與:hover相同的樣式，讓使用鍵盤來訪問元素（更多時候是a標籤）時，表現就跟用滑鼠移到該元素上的效果相同
- 用途：
-
- <a></a>使用:link,:visited,:hover,:active,:focus使連結的效果更豐富；:link指未訪問<a>標籤前
-
- 注意：<a>中使用偽類是，必須注意偽類套用樣式的順序，不然會導致後面的偽類覆蓋了前面的偽類的情況
- 順序為：a:link,a:visited,a:hover,a:focus,a:active（記憶：LVHFA）
- 習慣：LV一般一起設定，HFA一起設定
- eg: a:link,a:visited{text-decoration:none;} a:hover,a:focus,a:active{text-decoration:underline;}
- 表格行<tr></tr>中使用:hover偽類，懸停的該行整行變色
- 提交按鈕上使用:active
- 輸入框中使用:focus，使輸入時獲得豐富效果
- 注意：IE7及以下的版本不支援除連結外的其他元素上使用偽類別選取器！
3、選取器
- 常用選取器：
-
- 類型（元素、簡單）選取器
- ID選取器
- 類別選取器
- 偽類
- 通用選取器： *(通配)
- 進階選取器：
-
- 子選取器、相鄰同胞選取器
-
- 子選擇（IE7以上才支援）： #nav>li 選擇#nav下的直接(第一個)li子項目，注意與通用選取器（#nav li）的區別
- 注意這個選取器與後代選取器的區別，子選取器（child selector）僅是指它的直接後代，或者你可以理解為作用於子項目的第一個後代。而後代選取器是作用於所有子後代元素。後代選取器通過空格來進行選擇，而子選取器是通過“>”進行選擇
- 相鄰同胞選擇（定位位於同一個父元素下某個元素之後的一個元素）： h2+p 選擇h2後面緊跟的一個p元素
- 屬性選取器（IE6不支援）
-
- eg: [id="header"]{ color:red;}（指擁有id=header屬性的所有元素 或者 div[title]{}（指選擇有title屬性的div元素）
- 虛擬元素選取器：
-
- first-letter、first-line、before、after
- eg: p :first-letter{color:red;} div:after{content:"a";}
4、層疊和特殊性
- 層疊：處理同一個元素可能有一個或多個樣式規則，層疊給每個規則分配一個重要度。
- 特殊性：選取器的特殊決定規則的次序。
- 規則是，給每種選取器分配一個數字值，然後將規則的每個選取器的值加起來，計算出該數值來，按照最高數值的規則來應用樣式
- style行內屬性的規則特殊性總是高於其他選取器（因為其特殊性為1,0,0,0）
- 兩個規則的特殊性相同，後定義的規則優先
- 選取器特殊性分為4個等級a,b,c,d（特殊性：a,b,c,d）
- style行內樣式，a=1;
- b等於ID選取器的總數
- c等於類、偽類和屬性選取器的數量
- d等於類型選取器和虛擬元素選取器的數量
- eg: style="" 特殊性：1,0,0,0 如果基數是10，則特殊性是1000
- eg: #wrapper #content 特殊性：0,2,0,0 如果基數為10，則特殊性是200
- 最終計算規則的特殊性時，基數預設不是指定為某個特定值的，如果選取器數量不多，可以指定基數就是為10來計算
5、繼承
- 概念：應用樣式的元素的後代會繼承樣式的某些屬性。例如字型大小和顏色
- 注意和層疊區分開來
- 同時，繼承而來的樣式特殊性為空白！直接應用於元素的樣式總能覆蓋繼承而來的樣式。
