首頁 >web前端 >css教學 >css中偽類與偽元素如何使用

css中偽類與偽元素如何使用

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

偽類別

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

範例

a：link 表示未造訪過的連結

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

Image 1.jpg

## a : visit表示已造訪的連結

a:visited{
background-color: pink;
}

Image 7.jpg

a：hover當滑鼠移到連結上時

a:hover{
background-color: pink;
}

Image 1.jpg

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

a：active ：表示選取的連結

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

Image 6.jpg

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

偽元素

偽元素用於為某些選擇器設定特殊效果，而且只能套用於外部和文件級上下文，而不是內嵌樣式。它們可能只出現在選擇器鏈的末尾，每個選擇器只能指定一個偽元素。若要在單一元素結構上處理多個偽元素，必須建立多個樣式選擇器或宣告語句。

：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>

#適用首行

Image 8.jpg

Image 9.jpg

###### ###：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中偽類與偽元素如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多