css3中的僞類選擇器

1、動態僞類

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類

            a:link {color:gray;}/*連接沒有被訪問時前景色爲灰色*/
            a:visited{color:yellow;}/*連接被訪問事後前景色爲黃色*/
            a:hover{color:green;}/*鼠標懸浮在連接上時前景色爲綠色*/
            a:active{color:blue;}/*鼠標點中激活連接那一下前景色爲藍色*

對於這四個錨點僞類的設置，有一點須要特別注意，那就是他們的前後順序，要讓他們遵照一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。若是你把順序搞錯了會給你帶來意想不到的錯誤，你們對於這個應該很熟悉的，若是是初學的朋友，能夠私下練習一下。其中:hover和:active又同時被列入到用戶行爲僞類中，他們所表達的意思是：

    :hover用於當用戶把鼠標移動到元素上面時的效果；
    :active用於用戶點擊元素那一下的效果（正發生在點的那一下，鬆開鼠標左鍵此動做也就完成了）
    :focus用於元素成爲焦點，這個常常用在表單元素上。
對於:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。著做權歸做者全部。

2、UI元素狀態僞類

咱們把":enabled",":disabled",":checked"僞類稱爲UI元素狀態僞類，這些主要是針對於HTML中的Form元素操做，最多見的好比咱們"type="text"有enable和disabled兩種狀態，前者爲可寫狀態後者爲不可狀態；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態。來看兩個實例，好比說你想將"disabled"的文本框與別的文本框區別出來，你就能夠這樣應用

  input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

這樣一來就把頁面中禁用的文本框應用了一個不一樣的樣式。那麼對於其餘幾個用法是同樣的，這裏就不在講述。

IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。

3、CSS3的:nth選擇器

CSS3選擇器最新部分，有人也稱這種選擇器爲CSS3結構類，下面咱們經過實際的應用來具體瞭解他們的使用和區別，首先列出他具備的選擇方法：

    :first-child選擇某個元素的第一個子元素；
    :last-child選擇某個元素的最後一個子元素；
    :nth-child()選擇某個元素的一個或多個特定的子元素；
    :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
    :nth-of-type()選擇指定的元素；
    :nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
    :first-of-type選擇一個上級元素下的第一個同類子元素；
    :last-of-type選擇一個上級元素的最後一個同類子元素；
    :only-child選擇的元素是它的父元素的惟一一個了元素；
    :only-of-type選擇一個元素是它的上級元素的惟一一個相同類型的子元素；
    :empty選擇的元素裏面沒有任何內容。

詳細請查看：https://www.w3cplus.com/css3/pseudo-class-selector

 

 

 

對於這四個錨點僞類的設置，有一點須要特別注意，那就是他們的前後順序，要讓他們遵照一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。若是你把順序搞錯了會給你帶來意想不到的錯誤，你們對於這個應該很熟悉的，若是是初學的朋友，能夠私下練習一下。其中:hover和:active又同時被列入到用戶行爲僞類中，他們所表達的意思是：

1. :hover用於當用戶把鼠標移動到元素上面時的效果；
2. :active用於用戶點擊元素那一下的效果（正發生在點的那一下，鬆開鼠標左鍵此動做也就完成了）
3. :focus用於元素成爲焦點，這個常常用在表單元素上。

著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"。先來看最多見的錨點僞類著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css3/pseudo-class-selector © w3cplus.com