CSS——讀書筆記-02-選擇器

爲樣式找到應用目標

• 經常使用選擇器
• 高級選擇器
• 特殊性和重疊的做用
• 計劃和維護樣式表
• 如何在代碼中添加註釋

1.經常使用選擇器：

》類型選擇器(元素選擇器/簡單選擇器)： p、h1

》 後代選擇器：兩個選擇器間空格

》ID選擇器：#

》類選擇器：.

———————————以上4中選擇器的組合能夠成功找到不少元素————————————

》僞類：(冒號):　　

　　:link和:visited成爲連接僞類，只能應用於錨元素；

　　:hover、:active和:focus成爲動態僞類，理論上能夠應用於任何元素。

　　>能夠根據文檔結構以外的其餘條件對元素應用樣式。

　　>並且經過把僞類連接在一塊兒，能夠建立複雜的行爲，如以訪問的連接和未訪問的連接上實現不一樣的鼠標懸停效果。

　　　　a:visited:hover { color: olive; }

》通用選擇器：*

2.高級選擇器：

》子選擇器：>

　　後代選擇器選擇一個元素的全部後代，子選擇器只選擇元素的直接後代

》相鄰同胞選擇器：+

　　定位同一個父元素下某個元素以後的元素，以下，h2 + p，會見h2和第一個p設置樣式。

　　h2 + p {}

　　<h2></h2>

　　<p></p>

　　<p></p>

》屬性選擇器：詳見另外一篇文章http://www.cnblogs.com/congyue-pepsi/p/5672815.html

3. 層疊和特殊性：

優先級：

　　標有!important的用戶樣式

　　標有!important的做者樣式

　　做者樣式

　　用戶樣式

　　瀏覽器/用戶代理應用的樣式。

　　若是兩個規則的優先級相同，之後定義爲主

特殊性計算：

　　選擇器的特殊性分紅4個成分等級： a/b/c/d

　　》若是樣式是行內樣式，那麼a=1　　(style="")

　　》b等於ID選擇器的老是

　　》c等於類、僞類和屬性選擇器的數量

　　》d等於類型選擇器和僞元素選擇器的數量

如： #c #d .e {}  0210->210

4. 設計CSS代碼的結構：

通常性樣式：　　@group general styles

• 主題樣式
• reset樣式
• 連接
• 標題
• 其它元素

輔助樣式：　　@group helper styles

• 表單
• 通知和錯誤
• 一致的條目

頁面結構：　　@group page structure

• 標題、頁腳和導航
• 佈局
• 其餘頁面結構元素

頁面組件：　　@group page components

• 各個頁面

覆蓋　　@group overrides