為什麼要引入偽類與偽元素？
css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說，偽類和偽元素是用來修飾不在文件樹中的部分，比如，一句話中的第乙個字母，或是列表中的第乙個元素，又或者是滑鼠懸停在某個超連結上時要設定的樣式。
什麼是偽類，偽元素？
偽類：用於當已有元素處於的某個狀態時，為其新增對應的樣式，這個狀態是根據使用者行為而動態變化的。比如說，當使用者懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素新增樣式，但是它只有處於dom樹無法描述的狀態下才能為元素新增樣式，所以將其稱為偽類。
**偽元素：**用於建立一些不在文件樹中的元素，並為其新增樣式。實際上，偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文件結構中。比如說，我們可以通過:before來在乙個元素前增加一些文字，並為這些文字新增樣式。
偽類的分類：狀態偽類和結構性偽類
狀態偽類：是基於元素當前狀態進行選擇的。在與使用者的互動過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。
常見的狀態偽類主要包括：
:link 應用於未被訪問過的鏈結；
:hover 應用於滑鼠懸停到的元素；
:active 應用於被啟用的元素；
:visited 應用於被訪問過的鏈結，與:link互斥。
:focus 應用於擁有鍵盤輸入焦點的元素。
結構性偽類：是css3新增選擇器，利用dom樹進行元素過濾，通過文件結構的互相關係來匹配元素，能夠減少class和id屬性的定義，使文件結構更簡潔。
常見的結構性偽類包括：
:first-child 選擇某個元素的第乙個子元素；
:last-child 選擇某個元素的最後乙個子元素；
:nth-child() 選擇某個元素的乙個或多個特定的子元素；
:nth-last-child() 選擇某個元素的乙個或多個特定的子元素，從這個元素的最後乙個子元素開始算；
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後乙個開始計算；
:first-of-type 選擇乙個上級元素下的第乙個同類子元素；
:last-of-type 選擇乙個上級元素的最後乙個同類子元素；
:only-child 選擇的元素是它的父元素的唯一乙個子元素；
:only-of-type 選擇乙個元素是它的上級元素的唯一乙個相同型別的子元素；
:empty 選擇的元素裡面沒有任何內容。
:checked匹配被選中的input元素，這個input元素包括radio和checkbox。
:default匹配預設選中的元素，例如：提交按鈕總是表單的預設按鈕。
:disabled匹配禁用的表單元素。
:enabled匹配沒有設定disabled屬性的表單元素。
:valid匹配條件驗證正確的表單元素。
常見的偽元素選擇器：
::first-letter 選擇元素文字的第乙個字（母）。
::first-line 選擇元素文字的第一行。
::before 在元素內容的最前面新增新內容。
::after 在元素內容的最後面新增新內容。
::selection匹配使用者被使用者選中或者處於高亮狀態的部分
::placeholder匹配佔位符的文字，只有元素設定了placeholder屬性時，該偽元素才能生效
注意：你會發現偽類元素使用了兩個冒號 (:? 而不是乙個冒號 (?，這是 css3 規範中的一部分要求，目的是為了區分偽類和偽元素，大多數瀏覽器都支援這兩種表示方式。單冒號(:)用於 css3 偽類，雙冒號(::)用於 css3 偽元素。對於 css2 中已經有的偽元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。
所以，如果你的**只需要相容 webkit、firefox、opera 等瀏覽器，建議對於偽元素採用雙冒號的寫法，如果不得不相容 ie 瀏覽器，還是用 css2 的單冒號寫法比較安全。
偽元素的應用：
清除浮動：如果父元素的所有子元素都是浮動的，父元素的高度則無法撐開。可以通過對父元素新增after偽類撐開父元素高度，因為after就是其最後乙個子元素。
**如下：
.clear::after
**如下：
"spliter">分割線
counter-reset: 屬性設定某個選擇器出現次數的計數器的值。預設為 0。
counter-increment: 屬性設定某個選取器每次出現的計數器增量。預設增量是 1。
content: 插入生成內容。
**如下：
"chooses">
"checkbox">a
"checkbox">b
"checkbox">c
"checkbox">d
"checkbox">e
"checkbox">f
"checkbox">g
"checkbox">h
"checkbox">i
"checkbox">j
"choose">我選擇了個字母
偽類和偽元素區別
偽類是向某些選擇器新增特殊的效果，可以通過新增乙個類來達到，用乙個冒號來表示。pseudo classes 如 first child,link visiter hover active focus lang 偽類類似於class，表示一些元素的狀態，但無需標識的分類。偽元素是將特殊的效果新增到某些...
偽類和偽元素的區別
個人的關注點可能主要集中在js方向上，但是本著css也不能丟掉的原則，所以上網查了些css方面的困惑點，這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看，如果需要新增新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上新增類別的...
偽類和偽元素的區別
學習這麼長時間對於一些基本點還是不太理解，所以在這裡進行了區分 第一種理解偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。第二種理解 偽類的效果可以通過新增乙個實際的類來達到，而偽元素的效果則需要通過新增乙個實際的元素才能達到，這也是為什麼他們乙個稱為偽類，乙個稱為偽元素...