簡單瞭解學習CSS的偽類(特別是hover,actived)

來源:互聯網
上載者:User

 
:在HTML中當表現class屬性的時候,人們可以用點(.)號來作為~=號的一個替代選擇,所以
div.value等同於div[class~=value]。此時.value只能嚴格的應用於HTML中的class屬性,所以此類選擇符叫類選擇
符。在CSS中樣式通常依附與一個元素在文檔樹中的位置,這個簡單的模型對於許多情況來說是足夠的,但是一些常見的版式狀態不能應用於文檔樹的結構。例
如,在HTML中,沒有元素能夠引用一個段落的第一行,所以也沒有簡單的CSS選擇符應用它。所以,CSS引進了偽類(pseudo-class)和偽元
素(pseudo-element)來允許基於文檔樹意外資訊的格式化。
  第一種
:selector:pseudo-class {property: value} 也可以用HTML的class屬性來設定偽類。

  例句:

 a:link {color:red}

  
  第二種
:selector.class:pseudo-class {property: value} 偽類是最常用的偽類。

  例句:

 a.c1:link {color:red}

  錨(a)偽類

  CSS很多的建議並沒有得到瀏覽器的支援,但有四個可以安全使用的用在串連上的偽類。錨(a)偽類是最常用的偽類。例句如下:

   a:link {color: #FF0000} /* 未被訪問的連結 紅色 */
  a:visited {color: #00FF00} /* 已被訪問過的連結 綠色 */
  a:hover {color: #FFCC00} /* 滑鼠懸浮在上的連結 橙色 */
  a:active {color: #0000FF} /* 滑鼠點中啟用連結 藍色 */

  也可以用HTML的class屬性來設定偽類。例句如下:

   a.c1:link {color: #FF0000} /* 未被訪問的連結 紅色 */
  a.c1:visited {color: #00FF00} /* 已被訪問過的連結 綠色 */
  a.c1:hover {color: #FFCC00} /* 滑鼠懸浮在上的連結 橙色 */
  a.c1:active {color: #0000FF} /* 滑鼠點中啟用連結 藍色 */

  例句:actived的順序書寫。

  註:由於CSS優先順序的關係(後面比前面的優先順序高),在寫a的CSS時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫

      注意

  儘管CSS給予你繞開的控制權,用不同的顏色表示已經訪問過的串連是一個很好的習慣,因為很多使用者還是這樣預期的。偽類(除了hover)不常用,恐怕也沒有過去常用。因此,它沒有過去那樣有用了。但如果你能收集常用使用者的意見,你會發現應該使用它。

  傳統上,串連文本是藍色的,已訪問的串連是紫色的。也許,這是最有效、最有用的顏色。然而,伴隨著CSS的廣泛發展,這種顏色不會是平常的了,使用者也不再假設串連必須是藍色或紫色的。

  還應注意

  你應該也可以在除了串連的其他元素上使用hover偽類
。不幸的是,Internet Explore並不支援。這真是一個極大的煩惱,因為在其它瀏覽器上可以有很多小技巧讓你的頁面看起來更令人愉快。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.