您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關css的偽類有什么用的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
CSS偽類是用來添加一些選擇器的特殊效果。
偽類的語法:
selector:pseudo-class{property:value;}
CSS類也可以使用偽類:
selector.class:pseudo-class{property:value;}
anchor偽類
在支持CSS的瀏覽器中,鏈接的不同狀態都可以以不同的方式顯示
實例
a:link{color:#FF0000;}/*未訪問的鏈接*/
a:visited{color:#00FF00;}/*已訪問的鏈接*/
a:hover{color:#FF00FF;}/*鼠標劃過鏈接*/
a:active{color:#0000FF;}/*已選中的鏈接*/
注意:在CSS定義中,a:hover必須被置于a:link和a:visited之后,才是有效的。
注意:在CSS定義中,a:active必須被置于a:hover之后,才是有效的。
注意:偽類的名稱不區分大小寫。
偽類和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偽類使你有能力為不同的語言定義特殊的規則
注意:IE8必須聲明<!DOCTYPE>才能支持;lang偽類。
在下面的例子中,:lang類為屬性值為no的q元素定義引號的類型:
實例
q:lang(no){quotes:"~""~";}
感謝各位的閱讀!關于“css的偽類有什么用”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。