Css偽類

1、active、hover、visited和link偽類

規定連結的顏色：

a:link {color:#FF0000}     /* 未訪問的連結 */a:visited {color:#00FF00}  /* 已訪問的連結 */a:hover {color:#FF00FF}    /* 當有滑鼠移至上方在連結上 */a:active {color:#0000FF}   /* 被選擇的連結 */

注意點：

(1)為了產生預期的效果，在 CSS 定義中，a:hover 必須位於 a:link 和 a:visited 之後。

(2)為了產生預期的效果，在 CSS 定義中，a:active 必須位於 a:hover 之後。

(3)Pseudo-class（偽類）的名稱對大小寫不敏感。

(4)偽類可與 CSS 類配合使用。

 

2、first-child 偽類

定義和用法:first-child 偽類向元素的第一個子項目添加樣式。

說明利用 :first-child 這個偽類，只有當元素是另一個元素的第一個子項目時才能匹配。

例1：匹配所有 <p> 元素中的第一個 <em> 元素

p em:first-child{       font-weight:bold;}<p>I am a<em>strong</em> man. I am a <em>strong</em>man.</p><p>I am a<em>strong</em> man. I am a <em>strong</em>man.</p>

例2：

.testp:first-child{       color: blue;}<divclass="test">       <p>11111111111111111</p>       <p>22222222222222222</p>       <p>33333333333333333</p></div>

只有<p>11111111111111111</p>的樣式為{color: blue;}

3、focus 偽類

(1) focus 偽類在元素獲得焦點時向元素添加特殊的樣式。IE 瀏覽器不支援此屬性。說明這個偽類應用於有焦點的元素。

(2)如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支援 :focus 偽類。

規定獲得焦點的輸入欄位的顏色：(重要)

input:focus{  color:yellow;}