css的僞類選擇器的使用

僞類選擇器，在不一樣狀況下顯示的css，僞類選擇器在處理頁面的美觀是很大幫助。其實不少美麗的按鈕或者頁面都是有這些基礎的知識實現的，掌握好基礎很重要。

名字	實例	說明
:link	a:link	選擇全部未被訪問的連接
:visited	a:visited	被訪問的連接
:active	a:active	全部活動的連接
:hover	a:hover	鼠標所在的連接
:focus	Input:focus	得到焦點的input的css
:first-letter	P:first-letter	P元素的首字母樣式
:first-line	P:first-line	P元素的首行樣式
:first-child	P:first-child	選擇屬於父元素的第一個子元素的每一個 <p> 元素。
:before	P:before	P元素以前插入信息
:after	P:after	P元素以後插入信息
:lang(langugae)	P:lang(it)	選擇以it開頭的全部p元素
:first-of-type	P:first-of-type	選擇屬於其父元素的首個   <p> 元素的每一個 <p> 元素。
:last-of-type	P:last-of-type	選擇屬於其父元素的最後   <p> 元素的每一個 <p> 元素。
:only-of-type	P:only-of-type	選擇屬於其父元素惟一的   <p> 元素的每一個 <p> 元素。
:only-child	P:only-child	選擇屬於其父元素惟一子元素的全部p元素
:nth-child(n)	P:nth-child(2)	選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:nth-last-child(n)	P:nth-last-child(2)	從最後一個元素開始計數，選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:nth-of-type(n)	P:nth-of-type(2)	選擇屬於其父元素的第二個p元素的每一個p元素
:nth-last-of-type(n)	P:nth-last-of-type(2)	從最後開始計數的選擇屬於器父元素第二個p元素的每一個p元素
:last-child	P:last-child	選擇其父元素的最後一個元素的每一個p元素
:root	:root	根元素的css
:empty	P:empty	選擇沒有子元素的每一個p元素，包含文本信息
:target	#new:target	當前活動的#new元素
:enabled	Input:enabled	選擇每一個啓用的input元素
:disabled	Input:disabled	選擇每一個禁用的input元素
:checked	Input:checked	選擇被選擇的input元素
:not(selector)	:not(p)	選擇非p元素的元素
::selection	::selection	選擇被用戶選取的部分元素

 

列舉實例：

/* 未被訪問時，正常狀況下*/
    a:link{color: #ff3324;}
    /*點擊後時的狀態*/
    a:visited{color: #1E7DB9;}
    /*活動的連接*/
    a:active{color: #24d432;}
    /*鼠標所在的連接*/
    a:hover{color:#fcc100;}

 

點擊我

 

#p1:before,#p2:before,#p3:before{ content: '我是p元素的前方！'; color:#b82929; }
#p1:after,#p2:after,#p3:after{ content: '我是p元素的後方！'; color: #5eac6e; }

<p id="p1">你好，我是p1元素。</p> <p id="p2">你好，我是p2元素。</p> <p id="p3">你好，我是p3元素。</p>

你好，我是p1元素。

你好，我是p2元素。

你好，我是p3元素。

p:first-child{
    color: #b82929;
}



<div id="div1">
    <p>你好！</p>
    <p>你好！</p>
</div>