先來看一下如標(biāo)題三個選擇器的寫法：
.one類選擇器 :hover偽類選擇器 ::偽元素選擇器
類選擇器是一個點吊档，偽類選擇器是兩個點，偽元素選擇器是三個點唾糯。
接下來我們分別做一個介紹：
一怠硼、類選擇器
類選擇器最大的優(yōu)勢是可以給 元素對象 定義單獨或相同的樣式。
.類名 { 屬性1: 屬性值1; 屬性2: 屬性值2;}
小技巧：
1.長名稱或詞組可以使用中橫線來為選擇器命名移怯。
2.不建議使用“_”下劃線來命名css選擇器香璃。
3.不要用純數(shù)字、中文等命名舟误，盡量使用英文字母來表示葡秒。
二、偽類選擇器
偽類選擇器是用于向某些選擇器添加特殊的效果嵌溢。
比如給鏈接添加特殊效果眯牧；比如可以選擇第1個、第n個元素堵腹。
鏈接偽類選擇器
:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標(biāo)移動到鏈接上
:active 選定的鏈接
注意：以上順序盡量不要顛倒炸站，按照 lvha 的順序。
love hate 愛上了討厭 記憶法 或者 lv 包包非常 hao疚顷。
結(jié)構(gòu)（位置）偽類選擇器
:first-child 選取屬于其父元素的首個子元素的指定選擇器
:last-child 選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n) 匹配屬于其父元素的第n個字元素旱易，不論元素的類型
:nth-last-child(n) 選擇器匹配屬于其元素的第n個字元素的每個元素，不論元素類型腿堤，從最后一個子元素開始計數(shù)阀坏。n可以是數(shù)字、關(guān)鍵詞或公式
li:first-child { /* 選擇第一個孩子 */
color: blue;
}
li:last-child { /* 選擇最后一個孩子 */
color: purple;
}
li:nth-child(4) { /* 選擇第4個孩子 */
color: red;
}
目標(biāo)偽類選擇器
:target 目標(biāo)偽類選擇器：選擇器可用于選取當(dāng)前活動的目標(biāo)元素笆檀。
:target {
color: purple;
font-size: 14px;
}
三忌堂、偽元素選擇器(::brfore和::after)
之所以被稱為偽元素是因為他們不是真正的頁面元素，html沒有對應(yīng)的元素酗洒，但是其所有用法和表現(xiàn)行為與真正的頁面元素是一樣的士修，可以對其使用諸如頁面元素一樣的css樣式，表面看上去貌似是頁面的某些元素展現(xiàn)出來的效果樱衷，實際上是css樣式展現(xiàn)的行為棋嘲，因此被稱為偽元素。
偽元素在body的結(jié)構(gòu)是無法審查的矩桂，只能在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添加的內(nèi)容默認是inline元素，即行內(nèi)元素；
2.偽元素的content屬性是其的內(nèi)容雹锣；設(shè)置::before和::after時必須設(shè)置其content屬性网沾，否則偽元素就不起作用。
綜上可以看出：
類選擇蕊爵、偽類選擇器就是選取對象辉哥，做效果使用的。
偽元素選擇器 本質(zhì)上是 插入一個元素（標(biāo)簽or盒子） 只不過是行內(nèi)元素（ span a ）形式的盒子在辆，若要給偽元素寬和高的話证薇，得把其轉(zhuǎn)化為快元素dispaly:block。
