css僞類選擇器

僞類選擇器

  僞類是專門用來表示元素的一種特殊狀態，好比說常見的 a 元素的一些特殊狀態（原始狀態的超連接，訪問過的超連接，運行中的超連接等等），當咱們須要爲這些處在特殊狀態的元素設置樣式的時候就可使用僞類選擇器來定義。

動態僞類，由於這些僞類並不存在於HTML中,而只有當用戶和網站交互的時候才能體現出來，動態僞類包含兩種，第一種是咱們在連接中常看到的錨點僞類，如":link",":visited";另一種被稱做用戶行爲僞類，如「:hover」,":active"和":focus"

2、anchor僞類

給連接定義四個樣式：

• a:link{ }  正常狀態下的連接
• a:visited{ }  訪問過的連接 （只能定義字體顏色color）
• a:hover{ }  鼠標懸停的連接
• a:active{ }  正在被點擊的連接

僞類名稱不區分大小寫

實例：

一、爲沒訪問過的連接設置顏色爲藍色（正常狀態下的連接）：

a:link{ color:skyblue;}

二、爲訪問過的連接設置顏色爲紅色：

a:visited{ color:red; }

三、爲鼠標懸停狀態下的連接設置顏色爲綠色：

a:hover{ color:green;}

四、爲正在被點擊的超連接設置顏色爲黃色：

a:active{ color:yellow;}

:hover 和 :active 僞類不單單能夠給超連接設置樣式，也能夠支持超連接之外的元素使用hover和active。可是IE瀏覽器不支持超連接之外的元素使用hover和active。

1 p:hover{background：yellow} 3 p:active{background：orange} 5 <p>這是一個段落</p>

瀏覽器如何判斷連接是否訪問過？瀏覽器經過歷史記錄來判斷一個連接是否訪問過。

因爲涉及到了用戶隱私，因此：visited僞類只能設置字體顏色屬性。

優先順序：若是同時設置這四個僞類，那麼必須按照指定的順序設置才能生效：a:hover 必須在 a:link 和 a:visited 以後，須要嚴格按順序才能看到效果。a:active 必須在 a:hover 以後。

 

2、其餘僞類

• :focus  獲取焦點
• ::selection  選中的元素
• :before  指定元素前（僞元素）
• :after  指定元素後（僞元素）

一、：focus獲取焦點（文本輸入時閃爍的光標叫獲取焦點，光標消失叫作失去焦點）

例：文本框獲取焦點之後，其背景顏色變成黃色

input:focus{ background:blue}
<input type="text">

得到焦點爲

二、::selection爲選中的內容設置樣式

p::selection{background:yellow}
<p>第一個段落第一個段落第一個段落第一個段落</p>

三、在p元素後面添加文字內容

p:after{content:"會出如今元素的最後面";color:blue;}

 

四、在p元素前面添加文字（使用僞類元素插入的內容「會出如今元素的最前面」這部份內容不可選中）

p:before{content:"會出現元素的最前面";color:orange;}

 

 

3、選擇元素的第一個或最後一個子元素（:first-child僞類和:last-child僞類）

:first-child  選擇元素的第一個子元素

:last-child  選擇元素的最後一個子元素

一、選擇div父元素中的第一個子元素p元素，設置文字顏色爲紅色。

p:first-child{color:red} <div> <p >第一</p> <p>第二</p> <p>第三</p> </div>

二、選擇div父元素中的最後一個子元素p元素，設置文字顏色爲黃色。

p:last-child{color:yellow;}

<div>
<p >第一</p>
<p>第二</p>
<p>第三</p>
</div>

三、選擇相匹配的全部<p>元素的第一個 <em> 元素，定義文字顏色爲藍色。

p>em:first-child{color:blue} <div> <p >第一</p> <p><em>第二</em></p> <p>第三</p> </div>

四、選擇器匹配全部做爲元素的第一個子元素的 <p> 元素中的全部 <em> 元素，定義文字顏色爲橙色

p:first-child em{color:orange} <div> <p><em>第一</em></p> <p><em>第二</em></p> <p><em>第三</em></p> </div>