CSS類,ID,標籤和偽類詳細說明

CSS有4種定義方式:
1. 類, 名稱前面是一個點, 需要注意的是類實際上是屬性, 點前面如果沒有其它內容, 則預設是全域的, 有的話, 是專門那個對象的.
2. ID, 名稱前面是個"#", 這種專門用於對象的id屬性的, 本質上作用就是當你使用id的時候如果又想設定樣式, 那麼就不比再寫class屬性了. 還能避免其它id使用此屬性, 因為id必須唯一. 當然, 這種避免基本沒用, 因為你無需避免, 不用就行了. 
3. 標籤, 其實每個內建標籤, 比如p, a, img, 都有預置好了的樣式, 當然還有其它作用. 但是這個本質上和自訂標籤是一樣的, 只不過內部已經定義好了.
4. 偽類, 偽類只有4種: link,hover,active,visited. 從名稱來看, 是專門針對超連結標籤a的, 但是後來擴充到其它任何標籤. 偽類的本質是描述不同狀態下的樣式自動切換. 如果不用偽類, 你可以用JavaScript在相應的事件裡自己處理. 偽類提供了一個簡單的方法.
下面是關鍵的內容, 就是CSS標籤的寫法.
偽類冒號的兩端不能有空格, 這說明, 冒號其實是一個串連符, 和點號是屬性的串連符一樣, 因為CSS的空格表示不同的對象, 也就是說, 任何CSS樣式名稱如果之間有空格, 那麼就別認為是兩個標籤, 而不是一個. 如果沒空格, 就被認為是一個標籤 例如div:hover{color:red}這個CSS語句實際上只定義了一個CSS對象, 就是div:hover, 或者說給div添加了一個屬性hover, 這個屬性不同於一般的屬性, 它響應滑鼠移動過來的訊息, 使用的時候不用寫hover, 所有div都自動會響應滑鼠移過來,
顏色變成紅色. 
而div.hover{color:red}這個CSS語句也只定義了一個CSS對象, 就是div.hover, 這等於給div添加了一個普通屬性hover, 這個屬性怎麼用呢? 需要你在div標籤裡寫class="hover", 必須這麼用, 否則不起作用.
div .hover{color:red}又表示什麼呢? 因為div和.hover之間有個空格, 這實際上是兩個標籤, 但是描述了一種繼承關係, 我們定義的hover樣式, 必須在div的下一級標籤裡設定才起作用, div外邊和div自身設定class="hover"都不起作用. 更多的也是一樣, div .hover .abc, 表示3重繼承關係, 想要這個樣式起作用, 就需要div下面的一個標籤設定class為hover, 這個標籤內部的子標籤再設定class為abc, 這樣才行.
div,.hover{color:red}在div和.hover之間有個逗號, 這其實是一種並列關係, 是一種簡寫, 等價於div{color:red} .hover{color:red}這樣兩個標籤定義.
CSS樣式標籤可以重複定義, 後面定義的樣式會添加或者覆蓋.

還有更怪異的寫法: div.hover.abc{color:red}, 之間沒有空格, 此時實際上定義的是div屬性hover的屬性abc的樣式, 怎麼使用它呢? 因為這種基本沒什麼用, 沒有引入特殊的使用規則, 就是<div class="hover abc">文本</div>這樣用(奇怪的是"abc hover"這樣反著寫也行, 實際上是並列關係), 這和使用兩個樣式的情況會衝突, 單看這裡你不知道hover和abc是不是兩個類. 總之如果此時又有同名的全域, 比如abc樣式, hover樣式, 那麼也會一股腦全用上,
當然, div.hover.abc會有優先權. 沒搞明白也沒關係, 基本不要這麼用就行了.