偽類：

偽類用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的．比如說(shuō)，當(dāng)用戶懸停在指定的元素時(shí)，我們通過(guò)：:hover來(lái)描述這個(gè)元素的狀態(tài)．雖然它和普通的CSS類相似，可以為已有元素添加樣式，但是它只有處于dom樹無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以稱其為偽類．

偽類總結(jié)圖：

偽類.png

偽元素：

偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式．比如說(shuō)，可以通過(guò)：:before來(lái)在一個(gè)元素前增加一些文本，并為這些文本添加樣式，雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中．

偽元素總結(jié)圖：

偽元素.png

舉例說(shuō)明兩者的區(qū)別：

1.以下是HTML片段：

 <ul>
     <li>我是第一個(gè)</li>
     <li>我是第二個(gè)</li>
 </ul>

如果想給第一項(xiàng)添加樣式，可以再為第一個(gè)<li>添加一個(gè)類，并在該類中定義對(duì)應(yīng)樣式．

 <ul>
      <li class="first-item">我是第一個(gè)</li>
      <li>我是第二個(gè)</li>
 </ul>
 
 //CSS
 li .first-item{
    color:orange;
 }

如果不用添加類的方法，可以通過(guò)給設(shè)置第一個(gè)<li>的：first-child偽類來(lái)為其添加樣式：

 li:first-child{
    color:orange; 
 }

2.以下是HTML片段：

 <p>Hello world, and wish you have a good day!</p>

如果想給該段落的第一個(gè)字母添加樣式，可以在第一個(gè)字母中包裹一個(gè)<span>元素，并設(shè)置該<span>元素的樣式．

 <p><span class="first">H</span>ello world, and with you have a good day!</p>

如果不創(chuàng)建<span>元素，可以通過(guò)設(shè)置<p>元素的：first-letter偽元素來(lái)為其添加樣式．

 p:first-letter{
    font-size:5em;
 };

偽類的操作對(duì)象是文檔中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔樹外的元素．因此，它們的區(qū)別在于：有沒(méi)有創(chuàng)建一個(gè)文檔樹之外的元素

偽元素是使用單冒號(hào)還是雙冒號(hào)？

CSS3規(guī)范要求用雙冒號(hào)（::）．除一些低于IE8版本的瀏覽器，大部分瀏覽器都支持雙冒號(hào)（::）表示方法．但少部分偽元素（::backdrop）必須使用雙冒號(hào)，大部分偽元素都支持單冒號(hào)和雙冒號(hào)的寫法．
為了向后兼容，建議目前使用單冒號(hào)的寫法．（W3C）

偽類分類

狀態(tài)
1.:link：選擇未訪問(wèn)的鏈接；
2.:visited：選擇已訪問(wèn)過(guò)的鏈接；
3.:hover：選擇鼠標(biāo)指針浮動(dòng)在其上的元素；
4.:active：選擇活動(dòng)的鏈接；
5.:focus：選擇獲取焦點(diǎn)的輸入字段
結(jié)構(gòu)化

結(jié)構(gòu)性偽類選擇器的共同特征是允許開發(fā)者根據(jù)文檔樹中的結(jié)構(gòu)來(lái)指定元素中的樣式．

1.:not：一個(gè)否定偽類，用于匹配不符合參數(shù)選擇器的元素。
舉例：

//HTML 
<ul>
    <li class="first-item">一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
    <li>一些文本</li>
 </ul>
//CSS
li:not(.first-item) {
   color: orange;
}

2.:first-child：匹配元素的第一個(gè)子元素。

<ul>
   <li>這里的文本是橙色的</li>
   <li>一些文本</li>
   <li>一些文本</li>
</ul>
//CSS
li:first-child {
   color: orange;
}

3.:last-child：匹配元素的最后一個(gè)子元素。(用法與第一個(gè)類似)
4.:first-of-type：匹配屬于其父元素的首個(gè)特定類型的子元素的每個(gè)元素。
舉例：

 <ul>
    <li>這里的文本是橙色的</li>
    <li>一些文本 <span>這里的文本是橙色的</span></li>
    <li>一些文本</li>
</ul>
ul :first-of-type {
   color: orange;
}

第一個(gè)<li>元素和第一個(gè)<span>元素的文本會(huì)變?yōu)槌壬?/p>

5.:last-of-type：匹配屬于其父元素的特定類型的最后一個(gè)子元素的每個(gè)元素。(用法與:first-of-type類似)
6.:nth-child：根據(jù)元素的位置匹配一個(gè)或者多個(gè)元素，它接受一個(gè)an+b形式的參數(shù)。
舉例：

 <ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
  </ol>
  ol :nth-child(2) {
     color: orange;
  }//選擇第二個(gè)元素，”Beta”會(huì)變成橙色;
  
  ol :nth-child(2n) {
     color: orange;
  }//選擇位置序號(hào)是2的倍數(shù)的元素，”Beta”, “Delta”, “Zeta”, “kappa”會(huì)變成橙色;

  ol :nth-child(even) {
      color: orange;
  }//選擇位置序號(hào)為偶數(shù)的元素

7.:nth-last-child：與:nth-child相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的。
8.:nth-of-type：與:nth-child相似，不同之處在于它是只匹配特定類型的元素。

<article>
    <h1>我是標(biāo)題</h1>
    <p>一些文本</p>
    <a href="">![](images/rwd.png)</a>
    <p>這里的文本是橙色的</p>
</article>

p:nth-of-type(2) {
    color: orange;
}//第二個(gè)<p>元素會(huì)變?yōu)槌壬?

9.:nth-last-of-type：與:nth-of-type相似，不同之處在于它是從最后一個(gè)子元素開始計(jì)數(shù)的。
10.:only-child：當(dāng)元素是其父元素中唯一一個(gè)子元素時(shí)，:only-child匹配該元素。
11.:only-of-type：當(dāng)元素是其父元素中唯一一個(gè)特定類型的子元素時(shí)，:only-of-type匹配該元素。
舉例：

//第一個(gè)ul元素只有一個(gè)li類型的元素，該li元素的文本會(huì)變?yōu)槌壬?<ul>
    <li>這里的文本是橙色的</li>
    <p>這里不是橙色</p>
</ul>
<ul>
    <li>一些文本</li>
    <li>一些文本</li>
</ul>

li:only-of-type {
    color: orange;
}

12 . :target：當(dāng)URL帶有錨名稱，指向文檔內(nèi)某個(gè)具體的元素時(shí)，:target匹配該元素。
舉例：

    //url中的target命中id值為target的article元素，article元素的背景會(huì)變?yōu)辄S色。
    //URL
    http://example.com/#target

    //HTML
    <article id="target">
      <h1><code>:target</code> pseudo-class</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p> 
    </article>

    //CSS
    :target {
        background: yellow;
    }

表單相關(guān)
1.:checked：匹配被選中的input元素，這個(gè)input元素包括radio和checkbox。

 //當(dāng)復(fù)選框被選中時(shí)，與其相鄰的<label>元素的背景會(huì)變成黃色。
 //HTML
 <input type="checkbox"/>
 <label>我同意</label>

 //CSS
 input:checked + label {
    background: yellow;
 }

2.:default匹配默認(rèn)選中的元素，例如：提交按鈕總是表單的默認(rèn)按鈕。
舉例：

//提交按鈕的背景變成了黃色。
//HTML
<form action="#">
   <button type="submit">提交</button>
</form>

//CSS
:default  {
   background: yellow;
}

3.:disabled：匹配禁用的表單元素。
舉例：

 //被禁用input輸入框的透明度會(huì)變成50%。
 <input type="text" disabled/>
 
 :disabled {
     opacity: .5;
 }

4.:empty：匹配沒(méi)有子元素的元素。如果元素中含有文本節(jié)點(diǎn)、HTML元素或者一個(gè)空格，則:empty不能匹配這個(gè)元素。
舉例：

 //:empty能匹配的元素會(huì)變?yōu)辄S色。
 <div>這個(gè)容器里的背景是橙色的</div>
    <div> </div>
    <div></div>
 <div><!-- This comment is not considered content --></div>
 
 div {
    background: orange;
    height: 30px;
    width: 200px;
 }
 div:empty {
    background: yellow;
 }

5.:enabled匹配沒(méi)有設(shè)置disabled屬性的表單元素。
6.:in-range匹配在指定區(qū)域內(nèi)元素。
舉例：

 //當(dāng)數(shù)字選擇器的數(shù)字在5到10時(shí)，數(shù)字選擇器的邊框會(huì)設(shè)為綠色。
 <input type="number" min="5" max="10">

 input[type=number] {
    border: 5px solid orange;
 }

input[type=number]:in-range {
  border: 5px solid green;
}

7.:out-of-range：與:in-range相反，它匹配不在指定區(qū)域內(nèi)的元素。
8.:indeterminate：indeterminate的英文意思是“不確定的”。當(dāng)某組中的單選框或復(fù)選框還沒(méi)有選取狀態(tài)時(shí)，:indeterminate匹配該組中所有的單選框或復(fù)選框。
舉例：

//當(dāng)下面的一組單選框沒(méi)有一個(gè)處于被選中時(shí)，與``input``相鄰的``label``元素的
背景會(huì)被設(shè)為橙色。
<ul>
  <li>
    <input type="radio" name="list" id="option1">
    <label for="option1">Option 1</label>
  </li>
  <li>
    <input type="radio" name="list" id="option2">
    <label for="option2">Option 2</label>
  </li>
  <li>
     <input type="radio" name="list" id="option3">
     <label for="option3">Option 3</label>
  </li>
</ul>

:indeterminate + label {
   background: orange;
}

9.:valid：匹配條件驗(yàn)證正確的表單元素。
舉例：

 //當(dāng)email輸入框內(nèi)的值符合email格式時(shí)，輸入框的邊框會(huì)被設(shè)為綠色。
 <input type="email"/>

 input[type=email]:valid {
     border: 1px solid green;
 }

10.:invalid：與:valid相反，匹配條件驗(yàn)證錯(cuò)誤的表單元素。
11.:optional：匹配是具有optional屬性的表單元素。當(dāng)表單元素沒(méi)有設(shè)置為required時(shí)，即為optional屬性。
如下例，第一個(gè)input的背景不會(huì)被設(shè)為黃色，第二個(gè)input的背景會(huì)被設(shè)為黃色。

 <input type="text" required />
 <input type="text" />

 :optional {
    background: yellow;
 }

12.:required：與:optional相反匹配設(shè)置了required屬性的表單元素。
13.:read-only：匹配設(shè)置了只讀屬性的元素，表單元素可以通過(guò)設(shè)置“readonly”屬性來(lái)定義元素只讀。

如下例，input元素的背景會(huì)被設(shè)為黃色。

 <input type="text" value="I am read only" readonly>
 input:read-only {
    background-color: yellow;
 }

14.:read-write匹配處于編輯狀態(tài)的元素。input，textarea和設(shè)置了contenteditable的HTML元素獲取焦點(diǎn)時(shí)即處于編輯狀態(tài)。

如下例，input輸入框和富文本框獲取焦點(diǎn)時(shí)，背景變成黃色。

 <input type="text" value="獲取焦點(diǎn)時(shí)背景變黃"/>

 <div class="editable" contenteditable>
   <h1>點(diǎn)擊這里可以編輯</h1>
   <p>獲取焦點(diǎn)時(shí)背景變黃</p>
 </div>

 :read-write:focus {
    background: yellow;
 }

15.:scope匹配處于style作用域下的元素。當(dāng)style沒(méi)有設(shè)置scope屬性時(shí)，style內(nèi)的樣式會(huì)對(duì)整個(gè)html起作用。

如下例，第二個(gè)section中的元素的文本會(huì)變?yōu)樾斌w。

<article>
   <section>
      <h1>很正常的一些文本</h1>
      <p>很正常的一些文本</p>
   </section>
   <section>
     <style scoped>
        :scope {
            font-style: italic;
        }
     </style>
     <h1>這里的文本是斜體的</h1>
     <p>這里的文本是斜體的</p>
   </section>
</article>

注：目前支持這個(gè)偽類的瀏覽器只有火狐。

語(yǔ)言相關(guān)
1.:dir(處于實(shí)驗(yàn)階段)：匹配指定閱讀方向的元素，當(dāng)HTML元素中設(shè)置了dir屬性時(shí)該偽類才能生效。
現(xiàn)時(shí)支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）。目前，只有火狐瀏覽器支持:dir偽類，并在火狐瀏覽器中使用時(shí)需要添加前綴( -moz-dir() )。

如下例，p元素中的阿拉伯語(yǔ)（阿拉伯語(yǔ)是從右往左閱讀的）文本會(huì)變成橙色。

<article dir="rtl">
   <p>??????? ???? ?? ???? ?????? ?????? ???? ????? ??????? ????? ??? ???????? ??????  
      ?????? ??? ????? ?????.
  </p>
</article>

/* prefixed */
article :-moz-dir(rtl) {
   color: orange;
}

/* unprefixed */
article :dir(rtl) {
   color: orange;
}

如下例，p元素中的英語(yǔ)文本會(huì)變成藍(lán)色

<article dir="ltr">
  <p>?If you already know some HTML and CSS and understand the principles of 
  responsive web design, then this book is for you.</p>
</article>

article :-moz-dir(ltr) {
    color: blue;
}

/* unprefixed */
article :dir(ltr) {
   color: blue;
}

<i>注：我運(yùn)行以上兩個(gè)例子的時(shí)候，沒(méi)有任何效果，可能是因?yàn)樵搨晤愄幱趯?shí)驗(yàn)階段．</i>
2.:lang：匹配設(shè)置了特定語(yǔ)言的元素，設(shè)置特定語(yǔ)言可以通過(guò)為了HTML元素設(shè)置lang=""屬性，設(shè)置meta元素的charset=""屬性，或者是在http頭部上設(shè)置語(yǔ)言屬性。
實(shí)際上，lang=""屬性不只可以在html標(biāo)簽上設(shè)置，也可以在其他的元素上設(shè)置。

如下例，分別給不同的語(yǔ)言設(shè)置不同的引用樣式：

<article lang="en">
   <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="fr">
   <q>Lorem ipsum dolor sit amet.</q>
</article>
<article lang="de">
   <q>Lorem ipsum dolor sit amet.</q>
</article>

:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '?' '?'; }
:lang(de) q { quotes: '?' '?'; }

其他
1.:root：匹配文檔的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素則可能是其他元素。

如下例，將html元素的背景設(shè)置為橙色:

:root {
   background: orange;
}

2.:fullscreen匹配處于全屏模式下的元素。全屏模式不是通過(guò)按F11來(lái)打開的全屏模式，而是通過(guò)Javascript的Fullscreen API來(lái)打開的，不同的瀏覽器有不同的Fullscreen API。目前，:fullscreen需要添加前綴才能使用。

如下例，當(dāng)處于全屏模式時(shí)，h1元素的背景會(huì)變成橙色:

 <h1 id="element">在全屏模式下，這里的文本的背景會(huì)變成橙色.</h1>
 <button>進(jìn)入全屏模式!</button>

//JavaScript
var docelem = document.getElementById('element');
var button = document.querySelector('button');
button.onclick = function() {
   if (docelem.requestFullscreen) {
      docelem.requestFullscreen();
   }else if (docelem.webkitRequestFullscreen) {
      docelem.webkitRequestFullscreen();
   } else if(docelem.mozRequestFullScreen) {
      docelem.mozRequestFullScreen();
   } else if(docelem.msRequestFullscreen) {
      docelem.msRequestFullscreen();
  }
}

h1:fullscreen {
   background: orange;
}

h1:-webkit-full-screen {
   background: orange;
}

h1:-moz-full-screen {
   background: orange;
}

h1:-ms-fullscreen {
   background: orange;
}

偽元素
1.::before/:before：:before在被選元素前插入內(nèi)容。需要使用content屬性來(lái)指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹中。

<h1>World</h1>

h1:before {
  content: "Hello ";
}

2.::after/:after：:after在被元素后插入內(nèi)容，其用法和特性與:before相似。
3.::first-letter/:first-letter：匹配元素中文本的首字母。被修飾的首字母不在文檔樹中。
4.::first-line/:first-line：匹配元素中第一行的文本。這個(gè)偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中。
5.::selection匹配被用戶選中或者處于高亮狀態(tài)的部分。在火狐瀏覽器使用時(shí)需要添加-moz前綴。該偽元素只支持雙冒號(hào)的形式。

 ::-moz-selection {
    color: orange;
    background: #333;
 }

::selection  {
   color: orange;
   background: #333;
}

6.::placeholder匹配占位符的文本，只有元素設(shè)置了placeholder屬性時(shí)，該偽元素才能生效。
該偽元素不是CSS的標(biāo)準(zhǔn)，它的實(shí)現(xiàn)可能在將來(lái)會(huì)有所改變，所以要決定使用時(shí)必須謹(jǐn)慎。
在一些瀏覽器中（IE10和Firefox18及其以下版本）會(huì)使用單冒號(hào)的形式。

<input type="email" placeholder="name@domain.com">

input::-moz-placeholder {
    color:#666;
}

input::-webkit-input-placeholder {
   color:#666;
}

/* IE 10 only */
input:-ms-input-placeholder {
   color:#666;
}

/* Firefox 18 and below */
input:-moz-input-placeholder {
    color:#666;
}

7.::backdrop(處于試驗(yàn)階段)：用于改變?nèi)聊Ｊ较碌谋尘邦伾?，全屏模式的默認(rèn)顏色為黑色。該偽元素只支持雙冒號(hào)的形式.

 <h1 id="element">This heading will have a solid background color   
  in full-screen mode.</h1>
 <button onclick="var el = document.getElementById('element'); 
 el.webkitRequestFullscreen();">Trigger full screen!</button>
 
 h1:fullscreen::backdrop {
    background: orange;
}

<i>注：我運(yùn)行的時(shí)候沒(méi)有出現(xiàn)預(yù)期的效果．</i>

參考文檔：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/