先來看一下如標題三個選擇器的寫法：
.one類選擇器 :hover偽類選擇器 ::偽元素選擇器
類選擇器是一個點，偽類選擇器是兩個點，偽元素選擇器是三個點。
接下來我們分別做一個介紹：
一、類選擇器
類選擇器最大的優(yōu)勢是可以給 元素對象 定義單獨或相同的樣式。
.類名 { 屬性1: 屬性值1; 屬性2: 屬性值2;}
小技巧：
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名css選擇器。
3.不要用純數(shù)字、中文等命名，盡量使用英文字母來表示。
二、偽類選擇器
偽類選擇器是用于向某些選擇器添加特殊的效果。
比如給鏈接添加特殊效果；比如可以選擇第1個、第n個元素。
鏈接偽類選擇器
:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標移動到鏈接上
:active 選定的鏈接
注意：以上順序盡量不要顛倒，按照 lvha 的順序。
love hate 愛上了討厭 記憶法 或者 lv 包包非常 hao。
結構（位置）偽類選擇器
:first-child 選取屬于其父元素的首個子元素的指定選擇器
:last-child 選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n) 匹配屬于其父元素的第n個字元素，不論元素的類型
:nth-last-child(n) 選擇器匹配屬于其元素的第n個字元素的每個元素，不論元素類型，從最后一個子元素開始計數(shù)。n可以是數(shù)字、關鍵詞或公式
li:first-child { /* 選擇第一個孩子 */
color: blue;
}
li:last-child { /* 選擇最后一個孩子 */
color: purple;
}
li:nth-child(4) { /* 選擇第4個孩子 */
color: red;
}
目標偽類選擇器
:target 目標偽類選擇器：選擇器可用于選取當前活動的目標元素。
:target {
color: purple;
font-size: 14px;
}
三、偽元素選擇器(::brfore和::after)
之所以被稱為偽元素是因為他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現(xiàn)行為與真正的頁面元素是一樣的，可以對其使用諸如頁面元素一樣的css樣式，表面看上去貌似是頁面的某些元素展現(xiàn)出來的效果，實際上是css樣式展現(xiàn)的行為，因此被稱為偽元素。
偽元素在body的結構是無法審查的，只能在css中看到樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div::before {
content: "劉昊然";
background-color: pink;
border: 1px solid red;
width: 100px;
height: 100px;
display: block;
}
div::after {
content: "你們的";
display: block;
width: 50px;
height: 50px;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<div>是</div>
<p></p>
</body>
</html>
注意：
1.偽元素::before和::after添加的內容默認是inline元素，即行內元素；
2.偽元素的content屬性是其的內容；設置::before和::after時必須設置其content屬性，否則偽元素就不起作用。
綜上可以看出：
類選擇、偽類選擇器就是選取對象，做效果使用的。
偽元素選擇器 本質上是 插入一個元素（標簽or盒子） 只不過是行內元素（ span a ）形式的盒子，若要給偽元素寬和高的話，得把其轉化為快元素dispaly:block。
