CSS3僞類和僞元素

1.僞類

CSS3給出的定義是：

僞類存在的意義是爲了通過選擇器，格式化DOM樹以外的信息以及不能被常規CSS選擇器獲取到的信息。

通過上面的概念我們知道了僞類的功能有兩種：
1.格式化DOM樹以外的信息。比如： <a> 標籤的:link、:visited等。這些信息不存在於DOM樹中。

2.不能被常規CSS選擇器獲取到的信息。比如：要獲取第一個子元素，我們無法用常規的CSS選擇器獲取，但可以通過:first-child 來獲取到。

2.僞元素

CSS3給出的定義如下：
僞元素可以創建一些文檔語言無法創建的虛擬元素。比如：文檔語言沒有一種機制可以描述元素內容的第一個字母或第一行，但僞元素可以做到(::first-letter、::first-line)。同時，僞元素還可以創建源文檔不存在的內容，比如使用 ::before 或 ::after。

3.僞類和僞元素的區別（CSS3下的區別）

通過上面的概念，我們就可以知道僞類與僞元素最本質的一個區別：

僞類其實是彌補了CSS選擇器的不足，用來更方便地獲取信息。
而僞元素本質上是創建了一個虛擬容器(元素)，我們可以在其中添加內容或樣式。
在CSS3中，僞類用單冒號:表示；而僞元素用雙冒號::表示。一個選擇器可以同時使用多個僞類(但有的僞類會互斥)；而一個選擇器只能同時使用一個僞元素(未來的版本可能會支持多僞元素)。

4.主要用法

4.1僞類

1 :first-child匹配第一個子元素。
2 :last-child 匹配最後一個子元素。
HTML：

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>   

CSS：

li:first-child {
  color: red; // 第一個 li 會變紅
}
li:last-child {
  color: red; // 最後一個 li 會變紅
}

3 :first-of-type匹配屬於其父元素的第一個特定類型的子元素。
4 :last-of-type匹配屬於其父元素的最後一個特定類型的子元素。
HTML：

<div>
    <h1>h1文本</h1>
    <p>p文本</p>
    <h1>h1文本2</h1>
</div>

CSS：

p:first-of-type {
  color: red;  // <p>標籤的內容變爲紅色
}
h1:last-of-type {
  color: red;  // 倒數第一個<h1>標籤的內容變爲紅色(h1文本2)
}

這裏有必要強調一下 :first-child 與 :first-of-type 的區別。如果你的CSS寫成:

p:first-child {
  color:red;
}

頁面是不會有變化的，因爲 <p>元素並不是父元素 <div>的第一個子元素。

4.2僞元素

1 ::before ::after
這兩個僞元素下特有的屬性 content ，用於在 CSS 渲染中向元素邏輯上的頭部或尾部添加內容。注意這些添加不會改變文檔內容，不會出現在 DOM 中，不可複製，僅僅是在 CSS 渲染層加入。
[String] – 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：
a::after { content: "↗"; }
attr() – 調用當前元素的屬性，可以方便的比如將圖片的 Alt 提示文字或者鏈接的 Href 地址顯示出來。示例：
a::after { content:"(" attr(href) ")"; }
url() / uri() – 用於引用媒體文件。示例：
h1::before { content: url(logo.png); }
counter() – 調用計數器，可以不使用列表元素實現序號功能。具體請參見 counter-increment 和 counter-reset 屬性的用法。示例：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

2 ::first-letter匹配元素中文本的首字母。
3 ::first-line匹配元素中第一行的文本(只能在塊元素中使用)。
4 ::selection匹配被用戶選中的部分。

p::selection {
  color: red;
}

應用：清除浮動
清除浮動：浮動是因爲使用了float:left或float:right或兩者都有而使父級元素不能被撐開。
之前的方法：1)父級div定義 overflow:hidden

.clear-fix { overflow: hidden; zoom: 1; }

2)在父級</div>結束前加一個空的div引入class="clear-fix"樣式。

.clear-fix:{ clear: both;}

現在的方法（用::after,不用添加空的div）：

.clear-fix::after { display: block; content: ""; width: 0; clear: both; }

特效
除了簡單的添加字符，配合 CSS 強大的定位和特效特性，完全可以達到給簡單的元素另外附加最多兩個容器的效果。有一點需要注意的是，如果不需要內容僅配合樣式屬性做出效果，內容屬性也不能爲空，即 content:”” 。否則，其他的樣式屬性一概不會生效。
鼠標移上鍊接，出現方括號：

a {
	position: relative;
	display: inline-block;
	outline: none;
	text-decoration: none;
	color: #000;
	font-size: 32px;
	padding: 5px 10px;
}

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }

參考：
https://www.jianshu.com/p/996d021bced3
http://blog.dimpurr.com/css-before-after/