CSS的偽類與偽元素的區別
偽類包含兩種：狀態偽類和結構性偽類。
| 狀態偽類 | 是基於元素當前狀態進行選擇的。在與使用者的互動過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式，而進入另一狀態後，該樣式也會失去。 |
| :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 | 匹配禁用的表單元素 |
| :empty | 匹配沒有子元素的元素。如果元素中含有文字節點、HTML元素或者一個空格，則:empty不能匹配這個元素； |
| :enabled | 匹配沒有設定disabled屬性的表單元素； |
| :in-range | 匹配在指定區域內元素； |
| :out-of-range | 與:in-range相反，它匹配不在指定區域內的元素； |
| :indeterminate | indeterminate的英文意思是“不確定的”。當某組中的單選框或複選框還沒有選取狀態時，:indeterminate匹配該組中所有的單選框或複選框； |
| :valid | 匹配條件驗證正確的表單元素； |
| :invalid | 與:valid相反，匹配條件驗證錯誤的表單元素； |
| :optional | 匹配是具有optional屬性的表單元素。當表單元素沒有設定為required時，即為optional屬性； |
| :required | 匹配設定了required屬性的表單元素； |
| :read-write | 匹配處於編輯狀態的元素。input，textarea和設定了contenteditable的HTML元素獲取焦點時即處於編輯狀態； |
| :scope(處於試驗階段) | 匹配處於style作用域下的元素。當style沒有設定scope屬性時，style內的樣式會對整個html起作用； |
偽元素是對元素中的特定內容進行操作，而不是描述狀態。它的操作層次比偽類更深一層，因此動態性比偽類低很多。實際上，偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的，但它本身是基於元素的抽象，並不存在於文件結構中！常見的偽元素選擇器包括：
| 偽元素 | |
| :first-letter | 選擇元素文字的第一個字（母）。 |
| :first-line | 選擇元素文字的第一行。 |
| :before | 在元素內容的最前面新增新內容。 |
| :after | 在元素內容的最後面新增新內容。 |
注：偽元素雖然強大，但是還是有一些特定的標籤是不支援偽元素 before 和 after 的。諸如 <img> 、<input>、<iframe>，這幾個標籤是不支援類似 img::before 這樣使用。究其原因，要想要標籤支援偽元素，需要這個元素是要可以插入內容的，也就是說這個元素要是一個容器，而 input，img，iframe 等元素都不能包含其他元素，所以不能通過偽元素插入內容。
注意事項
有時你會發現偽類元素使用了兩個冒號 (::) 而不是一個冒號 (:)，這是 CSS3 規範中的一部分要求，目的是為了區分偽類和偽元素，大多數瀏覽器都支援這兩種表示方式。單冒號(:)用於 CSS3 偽類，雙冒號(::)用於 CSS3 偽元素。對於 CSS2 中已經有的偽元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。
所以，如果你的網站只需要相容 webkit、firefox、opera 等瀏覽器，建議對於偽元素採用雙冒號的寫法，如果不得不相容 IE 瀏覽器，還是用 CSS2 的單冒號寫法比較安全。
偽元素的應用
如果父元素的所有子元素都是浮動的，父元素的高度則無法撐開。可以通過對父元素新增after偽類撐開父元素高度，因為after就是其最後一個子元素。
.clear:after {
content: '';
display: block;
clear: both;
}在標籤內容的前後新增額外內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試</title>
<style>
.content {
color: block;
width: 300px;
padding: 10px;
border: 1px solid gray;
}
.content::before {
content: '我在前面啊';
margin-right: 10px;
padding: 5px;
color: red;
border: 2px dashed blue;
display: inline-block;
}
.content::after {
content: '我在後面啊';
margin-left: 10px;
padding: 5px;
color: red;
border: 2px dashed blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="content">這裡是內容</div>
</body>
</html>
CSS實現遞增序號功能，多用於建立目錄。
<html>
<head>
<style type="text/css">
body {
width: 400px;
height: 500px;
padding: 10px;
counter-reset: section;
border: 1px solid gray;
}
h3 {
counter-reset: subsection;
}
h3:before {
counter-increment: section;
content: "第 " counter(section) " 章：";
}
h4:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
margin-left: 40px;
}
</style>
</head>
<body>
<h3>視覺化格式模型</h3>
<h4>盒模型概述</h4>
<h4>定位概述</h4>
<h3>背景影象效果</h3>
<h4>圓角框</h4>
<h4>投影</h4>
<h4>不透明度</h4>
<h3>佈局</h3>
<h4>計劃佈局</h4>
<h4>設定基本結構</h4>
<h4>固定寬度、流式和彈性佈局</h4>
</body>
</html>
通過偽元素實現形變：
<html>
<head>
<style type="text/css">
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 160px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
background: gray;
}
.transform::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(50px) scaleY(2) rotateX(45deg);
transform-origin: bottom;
background: red;
z-index: -1;
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="transform">
</div>
</body>
</html>
總結
偽元素的本質是在不增加dom結構的基礎上新增的一個元素，在用法上跟真正的dom無本質區別。普通元素能實現的效果，偽元素都可以。有些用偽元素效果更好，程式碼更精簡。