css中偽類與偽元素的使用方法

發(fā)布時間：2020-08-29 13:50:49 來源：億速云閱讀：195 作者：小新欄目：web開發(fā)

小編給大家分享一下css中偽類與偽元素的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

偽類可以通過link,hover等方法給選擇器添加特殊效果，偽元素通過：first-line添加首行樣式，：first-letter添加首字母樣，以下將詳細介紹這兩方面的內(nèi)容

偽類

它是選擇html文檔的某些部分的方式，表示隨著時間的推移或通過用戶干預進入或者退出時元素的動態(tài)狀態(tài)，原則上不屬于html文檔樹本身及其元素或者是屬性，其實CSS偽類是用來添加一些選擇器的特殊效果，與偽元素不同，偽類可以出現(xiàn)在選擇器鏈中的任何位置。

例

a：link 表示未訪問過的鏈接

<style>
a:link{
background-color: pink;
}

css中偽類與偽元素的使用方法

a : visit表示已訪問過的鏈接

a:visited{
background-color: pink;
}

css中偽類與偽元素的使用方法

a：hover當鼠標移動到鏈接上時

a:hover{
background-color: pink;
}

css中偽類與偽元素的使用方法

a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！

a：active ：表示選中的鏈接

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;}

注意active一定要用在hover后面才會生效

偽元素

偽元素用于向某些選擇器設置特殊效果，而且只能應用于外部和文檔級上下文，而不是內(nèi)嵌樣式。它們可能只出現(xiàn)在選擇器鏈的末尾，每個選擇器只能指定一個偽元素。要在單個元素結構上處理多個偽元素，必須創(chuàng)建多個樣式選擇器或聲明語句。

：first-line偽元素

用于向文本的首行設置特殊樣式，只能用于塊級元素

可以修改以下屬性font，color，background，word-spacing，letter-spacing等

p:first-line 
{
color: pink;
font-variant: small-caps;/*改為大寫*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>

適用首行

css中偽類與偽元素的使用方法

：first-letter偽元素

用于向文本的首字母設置特殊樣式：

可以修改font，color，background，margin，padding，border等屬性

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改為大寫*/

}
</style>
</head>
<body>
<p>
you are very good!

僅適用于首字母

以上是css中偽類與偽元素的使用方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

猜你喜歡