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

CSS有4種定義方式：

一、類：名稱前面是一個點，須要注意的是類其實是屬性，點前面若是沒有其它內容，則默認是全局的，有的話，是專門那個對象的

二、ID：名稱前面是個"#"，這種專門用於對象的id屬性的，本質上做用就是當你使用id的時候若是又想設置樣式, 那麼就沒必要再寫class屬性了。

還能避免其它id使用此屬性，由於id 必須惟一。固然，這種避免基本沒用，由於你無需避免，不用就好了

三、標籤：其實每一個內置標籤，好比p， a， img， 都有預置好了的樣式，固然還有其它做用。可是這個本質上和自定義標籤是同樣的，只不過內部已經定義好了

四、僞類：

僞類只有4種: link，hover，active，visited

從名稱來看，是專門針對超連接標籤a的， 可是後來擴展到其它任何標籤

僞類的本質是描述不一樣狀態下的樣式自動切換

若是不用僞類，你能夠用JavaScript在相應的事件裏本身處理。僞類提供了一個簡單的方法

五、CSS標籤僞類的寫法：

      僞類冒號的兩端不能有空格， 這說明，冒號實際上是一個鏈接符，和點號是屬性的鏈接符同樣，

      由於CSS的空格表示不一樣的對象，也就是說，任何CSS樣式名稱若是之間有空格，那麼就別認爲是兩個標籤，而不是一個。

      (1) 若是沒空格，就被認爲是一個標籤，例如div:hover{color:red}

           這個CSS語句實際上只定義了一個CSS對象，就是div:hover，或者說給div添加了一個屬性hover，

           這個屬性不一樣於通常的屬性，它響應鼠標移動過來的消息，使用的時候不用寫hover，全部div都自動會響應鼠標移過來， 顏色變成紅色

 

      (2)而div.hover{color:red}

          這個CSS語句也只定義了一個CSS對象，就是div.hover，

          這等於給div添加了一個普通屬性hover， 這個屬性怎麼用呢？ 

          須要你在div標籤裏寫class="hover"， 必須這麼用，不然不起做用

      (3)div .hover{color:red}又表示什麼呢？

          由於div和.hover之間有個空格，這其實是兩個標籤，可是描述了一種繼承關係，

          咱們定義的hover樣式，必須在div的下一級標籤裏設置才起做用， div外邊和div自身設置class="hover"都不起做用

    更多的也是同樣，div .hover .abc，

          表示3重繼承關係, 想要這個樣式起做用，就須要div下面的一個標籤設置class爲hover，這個標籤內部的子標籤再設置class爲abc， 這樣才行

      (4)div,.hover{color:red}

          在div和.hover之間有個逗號， 這實際上是一種並列關係，是一種簡寫，等價於div{color:red} .hover{color:red}這樣兩個標籤訂義

  CSS樣式標籤能夠重複定義，後面定義的樣式會添加或者覆蓋

      (5)還有更怪異的寫法： div.hover.abc{color:red}，

          之間沒有空格， 此時實際上定義的是div屬性hover的屬性abc的樣式， 怎麼使用它呢？

          由於這種基本沒什麼用，沒有引入特殊的使用規則，就是<div class="hover abc">文本</div>這樣

         (奇怪的是"abc hover"這樣反着寫也行，其實是並列關係)，這和使用兩個樣式的狀況會衝突，單看這裏你不知道hover和abc是否是兩個類。

          總之若是此時又有同名的全局，好比abc樣式，hover樣式，那麼也會一股腦全用上， 固然, div.hover.abc會有優先權。