CSS僞類與僞元素
首先在介紹僞類與僞元素之前，先回顧一下CSS選擇器的作用，選擇器的作用主要是在我們給網頁元素添加樣式的時候指明是給哪個元素添加樣式。
CSS僞類與僞元素的本質作用就是選擇器。
既然僞類與僞元素都是提供選擇器的作用，那麼我們有這麼多選擇器爲什麼還要引入僞類與僞元素呢？下面我們先來看幾個例子
例一、
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
我們發現，如果只有這樣的結構，我們想給第二行添加單獨的樣式的話，按照類選擇器或者id選擇器的做法，我們需要給第二行添加class屬性或者id屬性。這樣的做法很文檔看起來很不清爽。所以我們可以通過給設置第二個<li>的:first-child僞類來爲其添加樣式
li:first-child {
color: red
}
例二、
<p>學而不思則罔，思而不學則殆，我們在學習的過程中一定要牢記的思想</p>
當我們遇到了這樣一個需求，我們需要給p段落中第一個字添加一個背景顏色，我們回想之前的選擇器的做法，是不是隻能整體選擇p標籤添加樣式，因此我們可以設置<p>的:first-letter僞元素來爲其添加樣式
p:first-letter {
background-color:red;
}
例三、
我們設想這麼一個場景，對於擁有很多a超鏈接的頁面來說，用戶有一個需求，需要將所有的鏈接都點擊一遍，那麼在點擊的過程中，我們如何向用戶提醒哪一些鏈接是已經點擊過的呢，這時候我們可以使用僞類來添加樣式，例如給已經點擊過的鏈接添加紅色的背景。
a:visited {
background-color: red;
}
一、僞類與僞元素的異同點
1.1 相同點
（1）本質作用都是選擇器，爲了操作一些通過普通的CSS選擇器無法直接取到的元素，可以說是選擇器的擴展。
（2）兩者都具有css樣式屬性，可以設置css樣式
1.2 不同點
（1）對象不同
僞類： 通過文檔中真實存在的標籤獲取不存在或者CSS選擇器無法選取的信息。例如：用戶鼠標的狀態信息（包括鼠標懸停，鼠標點擊等等，這些信息我們無法通過CSS選擇器進行選擇）僞元素：會創建一個原本不存在的抽象元素，該元素就像沙漠裏的海市蜃樓，人能看見，但是實際不存在。例如：創造出一段文本，用戶能在頁面上看見這段文本，但是無法選擇，無法保存，因爲其在文檔流中不存在。
（2）使用方法：
僞類： 只能通過單冒號:指定僞元素：可以單冒號，也可以雙冒號（在CSS1、CSS2版本中，僞類和僞元素都是通過單冒號:指定，在CSS3中，爲了區分僞類與僞元素，才使用::指定僞元素，但是爲了兼容以前的版本，也支持單冒號：的寫法）
（3）總結：
僞類對文檔中真實存在的元素的一些抽象進行選擇，僞元素是新增的假元素，用戶只能看見
二、常見的僞類
:link未訪問的節點，通常用於 a 標籤:visited已訪問的節點，通常用於 a 標籤:hover鼠標懸浮在元素上時的狀態:active當前選中，點擊時候的狀態:first-child第一個子節點:last-child最後一個子節點:enabled啓用的元素，通常用於表單:focus當前取的焦點的元素:checked選中的元素，通常用於表單 checkbox 元素:disabled未啓用的元素，通常用於表單
<style>
/*未訪問的 a 標籤*/
a:link {
background-color: red;
}
/*已訪問的 a 標籤*/
a:visited {
background-color: yellow;
}
/*鼠標懸浮的 a 標籤 -- 需放置於 link 和 visited 之後*/
a:hover {
background-color: green;
}
/*當前選中的 a 標籤 -- 需要放置於上面三種狀態之後*/
a:active {
background-color: purple;
}
/* class 爲 demo 的類下的第一個 div 子節點下的第一個 p 節點*/
.demo div:first-child p:first-child {
background-color: aqua;
color: blue;
font-size: 5px;
}
/* class 爲 demo 的類下的第一個 div 子節點下的最後一個 p節點*/
.demo div:first-child p:last-child {
color: cornflowerblue;
font-size: 30px;
}
</style>
<div>
<a href='#' target="_blank">點擊此處超鏈接1</a>
<a href='/demo01' target="_blank">點擊此處超鏈接2</a>
<a href='/demo02' target="_blank">點擊此處超鏈接3</a>
<a href='/demo03' target="_blank">點擊此處超鏈接4</a>
</div>
<hr>
<div class="demo">
<div>
<p>第一個 p 節點</p>
<p>第二個 p 節點</p>
<p>第三個 p 節點</p>
<p>第四個 p 節點</p>
</div>
</div>
三、常見的僞元素
::before 元素內容前插入新內容
::after元素內容之後插入新內容
::first-letter文本首字母。常用於對文本首字母設置樣式
::first-line文本首行。常用於對文本首行設置樣式。僅用於塊級元素。
::selection選中的內容。常用於文本。
::placeholder佔位符。用於設置佔位符的樣式。
案例
<style>
p {
width: 960px;
text-indent: 2em;
}
/*p 標籤第一個字放大*/
p::first-letter {
font-size: 40px;
}
/*p 標籤首行變色*/
p::first-line {
color: lightcoral;
}
/*p 標籤選中變色*/
p::selection {
background-color: #360;
}
/*p 標籤後面追加文本。*/
/*這裏可以插入的內容很多：圖標icon、文本、css樣式 ……*/
p::after {
content: '出自 《論語》'
}
</style>
<div>
<p>
學而不思則罔，思而不學則殆。”詞解罔：迷惑而無所得 殆：通假“怠”，精神疲倦而無所得 而：連詞，錶轉折。 則：連詞，相當於“就”“便”句釋 只是學習卻不思考就會迷惑而無所得，只是思考卻不學習就會精神疲倦而無所得 “這句話爲孔子所提倡的一種讀書及學習方法。指的是一味讀書而不思考，就會因爲不能深刻理解書本的意義而不能合理有效利用書本的知識，甚至會陷入迷茫。而如果一味空想而不去進行實實在在地學習和鑽研，則終究是沙上建塔，一無所得。告誡我們只有把學習和思考結合起來，才能學到切實有用的知識，否則就會收效甚微。
</p>
</div>
我們可以發現原文並沒有“出自《論語》” 而是我們通過僞元素新增的。出自《論語》屬於僞元素，無法選中。
由於本人比較懶惰，用了原文章的例子。特別鳴謝!