CSS：CSS 僞類(Pseudo-classes)

ylbtech-CSS：CSS 僞類(Pseudo-classes)

 

1.返回頂部

一、

CSS 僞類(Pseudo-classes)

---

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;}
 
<a class="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-child i
{
    color:blue;
}

嘗試一下 »

---

CSS - :lang 僞類

:lang 僞類使你有能力爲不一樣的語言定義特殊的規則

注意：IE8必須聲明<!DOCTYPE>才能支持;lang僞類。

在下面的例子中，:lang 類爲屬性值爲 no 的q元素定義引號的類型：

實例

q:lang(no) {quotes: "~" "~";}

嘗試一下 »

---

更多實例

爲超連接添加不一樣樣式
這個例子演示瞭如何爲超連接添加其餘樣式。

使用 :focus
這個例子演示瞭如何使用 :focus僞類。

---

全部CSS僞類/元素

選擇器	示例	示例說明
:checked	input:checked	選擇全部選中的表單元素
:disabled	input:disabled	選擇全部禁用的表單元素
:empty	p:empty	選擇全部沒有子元素的p元素
:enabled	input:enabled	選擇全部啓用的表單元素
:first-of-type	p:first-of-type	選擇每一個父元素是p元素的第一個p子元素
:in-range	input:in-range	選擇元素指定範圍內的值
:invalid	input:invalid	選擇全部無效的元素
:last-child	p:last-child	選擇全部p元素的最後一個子元素
:last-of-type	p:last-of-type	選擇每一個p元素是其母元素的最後一個p元素
:not(selector)	:not(p)	選擇全部p之外的元素
:nth-child(n)	p:nth-child(2)	選擇全部p元素的第二個子元素
:nth-last-child(n)	p:nth-last-child(2)	選擇全部p元素倒數的第二個子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	選擇全部p元素倒數的第二個爲p的子元素
:nth-of-type(n)	p:nth-of-type(2)	選擇全部p元素第二個爲p的子元素
:only-of-type	p:only-of-type	選擇全部僅有一個子元素爲p的元素
:only-child	p:only-child	選擇全部僅有一個子元素的p元素
:optional	input:optional	選擇沒有"required"的元素屬性
:out-of-range	input:out-of-range	選擇指定範圍之外的值的元素屬性
:read-only	input:read-only	選擇只讀屬性的元素屬性
:read-write	input:read-write	選擇沒有隻讀屬性的元素屬性
:required	input:required	選擇有"required"屬性指定的元素屬性
:root	root	選擇文檔的根元素
:target	#news:target	選擇當前活動#news元素(點擊URL包含錨的名字)
:valid	input:valid	選擇全部有效值的屬性
:link	a:link	選擇全部未訪問連接
:visited	a:visited	選擇全部訪問過的連接
:active	a:active	選擇正在活動連接
:hover	a:hover	把鼠標放在連接上的狀態
:focus	input:focus	選擇元素輸入後具備焦點
: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(language)	p:lang(it)	爲<p>元素的lang屬性選擇一個開始值

二、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

一、

http://www.runoob.com/css/css-pseudo-classes.html

二、

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。