Css偽類

來源:互聯網
上載者:User

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;}

 

相關文章

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.