溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css的偽類有什么用

發(fā)布時間:2022-02-25 11:24:24 來源:億速云 閱讀:144 作者:小新 欄目:web開發(fā)

這篇文章給大家分享的是有關(guān)css的偽類有什么用的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

  

  CSS偽類是用來添加一些選擇器的特殊效果。

  偽類的語法:

  selector:pseudo-class{property:value;}

  CSS類也可以使用偽類:

  selector.class:pseudo-class{property:value;}

  anchor偽類

  在支持CSS的瀏覽器中,鏈接的不同狀態(tài)都可以以不同的方式顯示

  實例

  a:link{color:#FF0000;}/*未訪問的鏈接*/

  a:visited{color:#00FF00;}/*已訪問的鏈接*/

  a:hover{color:#FF00FF;}/*鼠標(biāo)劃過鏈接*/

  a:active{color:#0000FF;}/*已選中的鏈接*/

  注意:在CSS定義中,a:hover必須被置于a:link和a:visited之后,才是有效的。

  注意:在CSS定義中,a:active必須被置于a:hover之后,才是有效的。

  注意:偽類的名稱不區(qū)分大小寫。

  偽類和CSS類

  偽類可以與CSS類配合使用:

  a.red:visited{color:#FF0000;}

  <aclass="red"href="css-syntax.html">CSS語法</a>

  如果在上面的例子的鏈接已被訪問,它會顯示為紅色。

  CSS:first-child偽類

  您可以使用:first-child偽類來選擇父元素的第一個子元素。

  注意:在IE8的之前版本必須聲明<!DOCTYPE>,這樣:first-child才能生效。

  匹配第一個<p>元素

  在下面的例子中,選擇器匹配作為任何元素的第一個子元素的<p>元素:

  實例

  p:first-child

  {

  color:blue;

  }

  匹配所有<p>元素中的第一個<i>元素

  在下面的例子中,選擇相匹配的所有<p>元素的第一個<i>元素:

  實例

  p>i:first-child

  {

  color:blue;

  }

  匹配所有作為第一個子元素的<p>元素中的所有<i>元素

  在下面的例子中,選擇器匹配所有作為元素的第一個子元素的<p>元素中的所有<i>元素:

  實例

  p:first-childi

  {

  color:blue;

  }

  CSS-:lang偽類

  :lang偽類使你有能力為不同的語言定義特殊的規(guī)則

  注意:IE8必須聲明<!DOCTYPE>才能支持;lang偽類。

  在下面的例子中,:lang類為屬性值為no的q元素定義引號的類型:

  實例

  q:lang(no){quotes:"~""~";}

感謝各位的閱讀!關(guān)于“css的偽類有什么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI