css3的偽（偽類和偽元素）大合集

本文講css3的偽，不是講它有多虛偽，而是說它的偽元素樣式。不得不說以前雖知html偽元素，但很少用，后得知借助css3偽元素可以發揮極大的便利。故總結css3的偽如下：

CSS中存在一些比較特殊的屬性，稱之為偽類，它們之中最常用的就是定義鏈接的偽:link，:visited，:hover，:active等。除了它們，還有一些不被常使用的偽類，有:focus，:first-child，:lang等。

如下將一一介紹各偽類的用法。

CSS 偽類 (Pseudo-classes)實例：

超鏈接

本例演示如何向文檔中的超鏈接添加不同的顏色。

-------------------------------------------

超鏈接 2

本例演示如何向超鏈接添加其他樣式。

:link 選擇器對指向未被訪問頁面的鏈接設置樣式, 

:hover 選擇器用於設置鼠標指針浮動到鏈接上時的樣式，

:active選擇器用於設置點擊鏈接時的樣式。

:visited 選擇器用於選取已被訪問的鏈接。

--------------------------------------------------

超鏈接 - :focus 的使用

本例演示如何對超鏈接應用 :focus 偽類（無法在 IE 中工作）。focus選擇獲得焦點的輸入字段，並設置其樣式。:focus 選擇器用於選取獲得焦點的元素。提示：接收鍵盤事件或其他用戶輸入的元素都允許 :focus 選擇器。

當輸入框獲得焦點時，改變它的背景色：

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

親自試一試

當元素獲得焦點時，發生 focus 事件。

當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數。blur失去焦點。

觸發 focus 事件

語法

$(selector).focus()

親自試一試

將函數綁定到 focus 事件

語法

$(selector).focus(function)

親自試一試

----------------------------------

:first-child（首個子對象）

本例演示 :first-child 偽類的用法。first-child是父元素的首個子元素。

text-transform用於轉換不同元素中的文本，text-transform 屬性控制文本的大小寫。

h1 {text-transform:uppercase}大寫
h2 {text-transform:capitalize}混寫
p {text-transform:lowercase}小寫

----------------------------------------------------------------------------

:lang（語言）

本例演示 :lang 偽類的用法。:lang 選擇器用於選取帶有以指定值開頭的 lang 屬性的元素。注釋：該值必須是整個單詞，即可是單獨的，比如 lang="en"，也可后跟連接符，比如 lang="en-us"。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS里不光有偽類，還有偽元素，比如：:first-letter，:first-line，:before和:after。
這個偽元素允許制作人員在元素內容的最后面插入生成內容，需要和content屬性一起使用，設置在對象后發生的內容。默認地，這個偽元素是inline行內元素，不過可以使用屬性 display 改變這一點。
所有主流瀏覽器都支持 :after 偽元素，但對於IE來說，只有IE8以上版本支持。

after顧名思義是在元素后面的意思，實質是在元素之后添加內容。 

在before/after偽元素選擇器中，有一個content屬性，能夠實現頁面中的內容插入。現總結content插入情況如下：

一 插入純文字

content:"插入的文章"，或者content:none不插入內容
html:

XML/HTML Code復制內容到剪貼板

<h1>這是h1</h1>
<h2>這是h2</h2>

css

CSS Code復制內容到剪貼板

h1::after{
    content:"h1后插入內容"
}
h2::after{
    content:none
}

運行結果：

這是h1h1后插入內容

這是h2

二 嵌入文字符號

可以使用content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。open-quote用於添加開始的文字符號，close-quote用於添加結束的文字符號。修改上述的css:

CSS Code復制內容到剪貼板

h1{
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加雙引號要轉義*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

運行結果：

(這是h1)

\這是h2\

三 插入圖片

content屬性也可以直接在元素前/后插入圖片
html:

XML/HTML Code復制內容到剪貼板

<h3>這是h3</h3>

css:

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

運行結果：

這是h3（此處有圖片）

四 插入元素的屬性值

content屬性可以直接利用attr獲取元素的屬性，將其插入到對應位置。
html:

XML/HTML Code復制內容到剪貼板

<a href="http://www.cnblogs.com/ibingbing">這是鏈接  </a>

css:

CSS Code復制內容到剪貼板

a:after{
    content:attr(href);
}

運行結果：

這是鏈接http://www.cnblogs.com/ibingbing

五 插入項目編號

利用content的counter屬性針對多個項目追加連續編號.
html:

XML/HTML Code復制內容到剪貼板

<h1>大標題</h1>
<p>文字</p>
<h1>大標題</h1>
<p>文字</p>
<h1>大標題</h1>
<p>文字</p>
<h1>大標題</h1>
<p>文字</p>

css:

CSS Code復制內容到剪貼板

h1:before{
    content:counter(my)'.';
}
h1{
    counter-increment:my;
}

運行結果：

大標題

文字

大標題

文字

大標題

文字

大標題

文字

counter-increment對部分和子部分進行編號（比如 "Section 1"、"1.1"、"1.2"）的方法：

body
  {
  counter-reset:section;
  }

h1
  {
  counter-reset:subsection;
  }

h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }

h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
  }

親自試一試

所有瀏覽器都支持 counter-increment 屬性。

注釋：如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 屬性。

counter-increment 屬性設置某個選取器每次出現的計數器增量。默認增量是 1。

利用這個屬性，計數器可以遞增（或遞減）某個值，這可以是正值或負值。如果沒有提供 number 值，則默認為 1。

注釋：如果使用了 "display: none"，則無法增加計數。如使用 "visibility: hidden"，則可增加計數。

六 項目編號修飾

默認插入的項目編號是數字型的，1,2,3.。。。自動遞增，也能給項目編號追加文字和樣式,依舊利用上面的html，css修改如下：

CSS Code復制內容到剪貼板

h1:before{
    content:'第'counter(my)'章';
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

運行結果：

大標題

文字

大標題

文字

大標題

文字

大標題

文字

七 指定編號種類

利用content(計數器名，編號種類)格式的語法指定編號種類，編號種類的參考可以依據ul的list-style-type屬性值。利用上述的html，css修改如下：

CSS Code復制內容到剪貼板

h1:before{
    content:counter(my,upper-alpha);
    color:red;
    font-size:42px;
}
h1{
    counter-increment:my;
}

運行結果：

大標題

文字

大標題

文字

大標題

文字

大標題

文字

八 編號嵌套

大編號中嵌套中編號，中編號中嵌套小編號。
html:

XML/HTML Code復制內容到剪貼板

<h1>大標題</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大標題</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<h1>大標題</h1>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

css:

CSS Code復制內容到剪貼板

h1::before{
    content:counter(h)'.';
}
h1{
    counter-increment:h;
}
p::before{
    content:counter(p)'.';
}
p{
    counter-increment:p;
}

運行結果：

1.大標題

1.文字1

2.文字2

3.文字3

2.大標題

4.文字1

5.文字2

6.文字3

3.大標題

7.文字1

8.文字2

9.文字3

在示例的輸出中可以發現，p的編號是連續的。如果對於每一個h1后的三個p重新編號的話，可以使用counter-reset屬性重置，修改上述h1的css:

CSS Code復制內容到剪貼板

h1{
    counter-increment:h;
    counter-reset:p;
}

這樣，編號就重置了，看看結果：

1.大標題

1.文字1

2.文字2

3.文字3

2.大標題

1.文字1

2.文字2

3.文字3

3.大標題

1.文字1

2.文字2

3.文字3

還可以實現更復雜的嵌套，例如三層嵌套。
html:

XML/HTML Code復制內容到剪貼板

<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>
<h1>大標題</h1>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>
<h2>中標題</h2>
<h3>小標題</h3>
<h3>小標題</h3>

css:

CSS Code復制內容到剪貼板

h1::before{
    content:counter(h1)'.';
}
h1{
    counter-increment:h1;
    counter-reset:h2;
}
h2::before{
    content:counter(h1) '-' counter(h2);
}
h2{
    counter-increment:h2;
    counter-reset:h3;
}
h3::before{
    content:counter(h1) '-' counter(h2) '-' counter(h3);
}
h3{
    counter-increment:h3;
}

運行結果：

1.大標題

1-1中標題

1-1-1小標題

1-1-2小標題

1-2中標題

1-2-1小標題

1-2-2小標題

2.大標題

2-1中標題

2-1-1小標題

2-1-2小標題

2-2中標題

2-2-1小標題

2-2-2小標題

 最后，css3偽類和偽元素的區別如下：

偽類用於向某些選擇器添加特殊的效果。

偽元素用於將特殊的效果添加到某些選擇器。