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會有優先權. 沒搞明白也沒關係, 基本不要這麼用就行了.