又翻了一下之前的讀書筆記，再重溫了忘掉的細節。最近一年的工作，由於有重構崗位的同學負責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、層疊和特殊性
5、繼承
