之前介紹了8種選擇器,基本上可以應(yīng)對(duì)大部分的開發(fā)需求位谋，但是如果不會(huì)使用偽類和偽元素，就跟下面的圖差不多堰燎，后面會(huì)摔的施流。偽元素和偽類雖然不是特別常用，但是炬丸，很好用本砰，可以幫你省掉很多無用功，效果還好仅讽。下面直接進(jìn)入正題陶缺，盡量用最小的篇幅讓人明白如何使用它們。
1.偽元素和偽類的區(qū)別
- 偽元素和偽類都是為了給一些特殊需求加樣式洁灵，定義上基本一致饱岸。
- 偽類像類選擇器一樣給已存在某個(gè)元素添加額外的樣式掺出；偽元素則是給自己虛擬的元素添加樣式。
- 已存在元素是指DOM中存在的苫费，偽元素則是虛擬的一種汤锨，樣式也是給這個(gè)虛擬的元素使用的。比如虛擬一個(gè)div
- 聲明不同百框，偽類和選擇器之間用一個(gè)冒號(hào)隔開闲礼，偽元素則是兩個(gè)冒號(hào)隔.
2.常用的偽類
常用的偽類有兩類UI偽類和結(jié)構(gòu)偽類。這里只介紹5個(gè)铐维，應(yīng)該足夠用了柬泽。
2.1.hover和active
這兩個(gè)屬于UI偽類（link/visited/active/hover）四個(gè)中的其中兩個(gè)，hover指當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)觸發(fā)某種樣式方椎；activate指鼠標(biāo)按下時(shí)的某種樣式聂抢。
hover使用場(chǎng)景：一些可點(diǎn)擊的列表，表格行棠众，卡片等琳疏，鼠標(biāo)放上去之后背景顏色會(huì)發(fā)生變化，就可以使用hover闸拿。
active使用場(chǎng)景：按鈕按下空盼，圖片按下以及一些可點(diǎn)擊元素或者組件等的按下操作樣式改變。
下面是一個(gè)非常簡(jiǎn)單的按鈕案例（在線MP4轉(zhuǎn)GIF不知道這個(gè)圖能存在多久新荤，看不見的底下評(píng)論提醒我）：
第一個(gè)按鈕當(dāng)鼠標(biāo)放上去是改變邊框和字體顏色揽趾，第二則是在鼠標(biāo)按下的時(shí)候改變背景和顏色。具體代碼如下
.btn{
height: 34px;
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
color: rgba(0,0,0,.65);
font-weight: 400;
outline: none;
border: 1px solid #cbcbcb;
}
.btn:hover{
border-color: #3385ff;
color: #3385ff;
}
.btn2{
height: 34px;
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
color: #fff;
background: #3385ff;
border-width: 0;
font-weight: 400;
outline: none;
}
.btn2:active{
border: 1px solid #3385ff;
color: #3385ff;
background: #fff;
}
HTML：
<div>
<button class="btn">按鈕</button>
<button class="btn2">按鈕</button>
</div>
使用非常簡(jiǎn)單苛骨，就是在類選擇器后面使用一個(gè)冒號(hào)后面根據(jù)需求是鼠標(biāo)放上去時(shí)觸發(fā)還是按下時(shí)觸發(fā)決定使用哪一個(gè)偽類篱瞎。如上面第一個(gè)btn是( .btn:hover ) 第二個(gè)則是( .btn2:active )。
2.2.first-child last-child nth-child(n/odd/even)
這三個(gè)屬于結(jié)構(gòu)偽類痒芝，常用來給表格或者列表添加樣式俐筋。
- 假設(shè)父元素是一個(gè)div，使用樣式class=‘box’严衬；
- 那么當(dāng)定義.box:first-child或者.box:last-child時(shí)分別是指給div的第一個(gè)或者最后一個(gè)子元素添加樣式澄者。
- nth-child這個(gè)就比較牛掰了，參數(shù)是一個(gè)數(shù)值代表給第幾個(gè)元素添加樣式请琳，如果是odd標(biāo)示給元素為奇數(shù)的添加樣式粱挡，even則是給是偶數(shù)的元素添加樣式。
看個(gè)例子俄精，首行添加灰色背景,其他奇數(shù)行橙色背景的一個(gè)表格
表格
css(簡(jiǎn)單不):
td,th {
padding: 12px;
}
table tr:nth-child(odd){
background: #ffab00;
}
table tr:first-child{
background: #ccc;
}
html(也很簡(jiǎn)單都是重復(fù)的):
<table border="1" frame="box" rules="all" width="50%">
<tr>
<th>標(biāo)題1</th>
<th>標(biāo)題2</th>
<th>標(biāo)題3</th>
<th>標(biāo)題4</th>
</tr>
<tr>
<td>content-1</td>
<td>content-1</td>
<td>content-1</td>
<td>content-1</td>
</tr>
<tr>
<td>content-2</td>
<td>content-2</td>
<td>content-2</td>
<td>content-2</td>
</tr>
<tr>
<td>content-3</td>
<td>content-3</td>
<td>content-3</td>
<td>content-3</td>
</tr>
<tr>
<td>content-4</td>
<td>content-4</td>
<td>content-4</td>
<td>content-4</td>
</tr>
<tr>
<td>content-5</td>
<td>content-5</td>
<td>content-5</td>
<td>content-5</td>
</tr>
</table>
3.常用偽元素
before 和 after是經(jīng)常經(jīng)常重用的偽元素询筏。我們直接看兩個(gè)最簡(jiǎn)單的例子。再一句話的前面(before)和后面(after)分別添加一個(gè)圓形和一個(gè)矩形竖慧。
<p class="eazy">我就是那句話!</p>
css:
.eazy{
font-size: 18px;
}
.eazy::before{
content:'';
display: inline-block;
width: 10px;
height:10px;
background: #ffab00;
border-radius:50%;
}
.eazy::after{
content:'';
display: inline-block;
width: 10px;
height:10px;
background: #3385ff;
}
雙冒號(hào)后面跟跟關(guān)鍵字before或者after嫌套，在后面的內(nèi)容即是要給這個(gè)偽元素添加的樣式局冰。其中content屬性一定要設(shè)置，可以設(shè)置為空灌危，否則不會(huì)顯示；其次碳胳，設(shè)置了依然沒有顯示就要設(shè)置表明這個(gè)偽元素塊級(jí)元素勇蝙。
3.1 在來看兩個(gè)例子，項(xiàng)目開發(fā)中經(jīng)常要畫一些氣泡挨约，比如
這是兩種氣泡味混，帶有背景色的和帶有邊框的，實(shí)現(xiàn)上稍微有些區(qū)別诫惭，但是他們的小突起就是用偽元素畫的翁锡。
HTML：
<div class="bubble-box">
<div class="bubble-left">
Hello, can I have a star?
</div>
<div class="bubble-top">
Hello, can I have a star?
</div>
<div class="bubble-bottom">
Hello, can I have a star?
</div>
<div class="bubble-right">
Hello, can I have a star?
</div>
<div class="bubble-noColor">
Hello, can I have a star?
</div>
</div>
css有點(diǎn)長(zhǎng)，但是仔細(xì)觀察90%的代碼都是重復(fù)的并不難夕土。主要變動(dòng)是使用定位position屬性控制小突起的位置馆衔，以及border-color來控制凸起箭頭的朝向。三角形的畫法原理可以看這里怨绣！
.bubble-box{
display: flex;
padding: 10px;
}
.bubble-top{
width: 120px;
padding: 10px;
background: #3385ff;
border-radius: 6px;
position: relative;
color:#fff;
}
.bubble-top::before{
content: '';
width: 0;
height: 0;
position: absolute;
border:6px solid #3385ff;
border-color: transparent transparent #3385ff transparent;
left: 46%;
top: -12px;
}
.bubble-left{
width: 120px;
padding: 10px;
background: #3385ff;
border-radius: 6px;
position: relative;
color:#fff;
}
.bubble-left::before{
content: '';
width: 0;
height: 0;
position: absolute;
border:6px solid #3385ff;
border-color: transparent #3385ff transparent transparent;
left: -12px;
top: 24px;
}
.bubble-bottom{
width: 120px;
padding: 10px;
background: #3385ff;
border-radius: 6px;
position: relative;
color:#fff;
}
.bubble-bottom::before{
content: '';
width: 0;
height: 0;
position: absolute;
border:6px solid #3385ff;
border-color: #3385ff transparent transparent transparent;
left: 46%;
bottom: -12px;
}
.bubble-right{
width: 120px;
padding: 10px;
background: #3385ff;
border-radius: 6px;
position: relative;
color:#fff;
}
.bubble-right::before{
content: '';
width: 0;
height: 0;
position: absolute;
border:6px solid #3385ff;
border-color: transparent transparent transparent #3385ff;
right: -12px;
top: 24px;
}
.bubble-noColor{
width: 120px;
padding: 10px;
border:1px solid #ccc;
border-radius: 6px;
position: relative;
color:#0f0f0f;
}
.bubble-noColor::before{
content: '';
width: 9px;
height: 9px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
background: white;
transform: rotate(45deg);
position: absolute;
left: 46%;
top: -6px;
}
3.2 利用偽元素畫一個(gè)時(shí)間軸
如圖
解析角溃，每一行都只設(shè)置左邊框，這樣就這回出現(xiàn)一條豎線篮撑，然后每一行前面加一個(gè)圓點(diǎn)减细，就會(huì)呈現(xiàn)時(shí)間軸的樣式，加圓點(diǎn)當(dāng)然是用偽元素了赢笨。
先看HTML未蝌，很簡(jiǎn)單：
<div>
<ul class="list">
<li>2018-11-15 吃了好吃的</li>
<li>2018-11-16 不開心</li>
<li>2018-11-18 藍(lán)瘦香菇</li>
<li>2018-11-23 滾蛋</li>
<li>2018-12-10 嗯哼隨心隨遇把</li>
</ul>
</div>
css 先給li標(biāo)簽設(shè)置左邊框border-left，
.list{
padding: 10px;
border: 1px solid #fff;
}
.list li{
list-style: none;
padding: 10px;
border-left: 1px solid #ccc;
}
第二步茧妒，添加偽元素
.list li::before{
content: '';
display: inline-block;
width: 6px;
position: absolute;
height: 6px;
left: 16px;
margin-top: 7px;
border: 1px solid #ffab00;
border-radius: 50%;
background: #3385ff;
}
3.3 偽元素怎么添加內(nèi)容的
偽元素雖然是不存在于DOM樹種的元素萧吠，但是也是可以添加內(nèi)容的，就是上面提到的content屬性嘶伟。content屬性可以是URL怎憋、字符串甚至是圖片，視頻等九昧。
我們把第三節(jié)剛開始的那個(gè)前后圓形和矩形的content設(shè)置為'1'和'2'.就變成這樣了绊袋。
所以content就是這只偽元素中內(nèi)容的入口，這也解釋了為什么不設(shè)置這個(gè)屬性就不顯示的原因铸鹰，哪怕設(shè)置為空癌别，也相當(dāng)于我定義了這個(gè)偽元素。
最后再看一個(gè)例子：
如果人工去標(biāo)示會(huì)非常的消耗成本蹋笼，實(shí)際上偽元素就可以輕松解決這個(gè)問題展姐。content + counters實(shí)現(xiàn)目錄結(jié)構(gòu)躁垛。
HTML：
<div class="list2">
<ul>
<li>吃了好吃的
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</li>
<li>不開心</li>
<li>藍(lán)瘦香菇
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</li>
<li>滾蛋</li>
<li>嗯哼隨心隨遇把</li>
</ul>
</div>
css counter-reset定義一個(gè)計(jì)數(shù)器后面跟一個(gè)名字，這個(gè)屬性在哪個(gè)元素上設(shè)置則標(biāo)示遇到這個(gè)元素我就重新開始計(jì)數(shù)圾笨，如上面的HTML教馆，我們把這個(gè)屬性設(shè)置到ul上，則遇到ul就重新計(jì)數(shù)（添加一個(gè)新的計(jì)數(shù)器擂达，原計(jì)數(shù)器不受影響）土铺。
.list2{
padding: 10px;
border: 1px solid #ccc;
}
.list2 li{
list-style: none;
}
.list2 ul{
counter-reset: xuhao;
}
.list2 li::before{
counter-increment: xuhao;
content: counters(xuhao, ".") " ";
}
在li元素的偽元素上接受這個(gè)計(jì)數(shù)值通過counters,第一參數(shù)接收計(jì)數(shù)器，第二參數(shù)指明新的計(jì)數(shù)值以什么字符鏈接在上一級(jí)計(jì)數(shù)值得后面
