偽類是一種虛構(gòu)的狀態(tài)或者是一個(gè)具有特殊屬性的元素可以使用css進(jìn)行樣式修飾。常見的幾種偽類有：
:link ,:visited,:hover,:active,:first-child,:nth-child,:nth-of-type
偽類前面總是加一個(gè)冒號(hào)（：）。
:link偽元素代表鏈接的正常狀態(tài)，用于選擇未訪問的鏈接。:visited偽類用于已經(jīng)被訪問過的鏈接。:hover偽類用于當(dāng)用戶的鼠標(biāo)懸停在鏈接之上時(shí)對(duì)元素的樣式修飾。:active表示鼠標(biāo)點(diǎn)擊時(shí)激活。在這里需要聲明一點(diǎn)，:link偽元素需要在所有此類別的偽元素之前聲明。其順序?yàn)?code>:link,:visited,:hover,:active。
p:nth-child（n）滿足兩條：
1、是p元素
2、是父元素的第n個(gè)孩子
p:nth-of-type（n）則表示：
父元素的第n個(gè)段落（p）
偽元素，更像是虛擬的元素可以和HTML元素一樣對(duì)待。區(qū)別在于它們并不存在于文檔樹或者DOM之中。這意味著我們并沒有真正的指定偽元素，但是可以使用CSS進(jìn)行創(chuàng)建。
常見的幾種偽元素
:after,:before,:first-letter
在偽元素中，css3引入雙冒號(hào)（：：），但是為了更好地兼容瀏覽器，也可以使用單冒號(hào)（：）。但是有一些為元素必須使用雙冒號(hào)，::backdrop.
偽元素通過CSS生成內(nèi)容是通過content屬性結(jié)合:before或者:after偽元素來實(shí)現(xiàn)。
::BEFORE/:BEFORE
:before偽元素和它的兄弟:after，用來給另外一個(gè)HTML元素添加內(nèi)容(文本或者圖形)。同樣的，添加的內(nèi)容并不在DOM中真實(shí)存在但是可操縱。另外，內(nèi)容的屬性需要在CSS中聲明。
需要記住，使用這個(gè)偽元素添加的文本不可以被選擇。
HTML:
<h1>Ricardo</h1>
CSS:
h1:before {
content: "Hello "; /* Note the space after the word Hello. */
}
渲染出來類似這樣：
Hello Ricardo!
注意:“Hello ”中的空格也同時(shí)被添加進(jìn)去了。
::AFTER/:AFTER
:after偽元素用來向另一個(gè)HTML元素中添加內(nèi)容(同樣的也是文本或者圖形)。被添加的內(nèi)容不存在于DOM中，但是可操縱。為了更好地工作，內(nèi)容屬性需要在CSS中聲明。
注意，使用這個(gè)偽元素添加的內(nèi)容不可以被選擇。
HTML:
<h1>Ricardo</h1>
CSS:
h1:after {
content: ", Web Designer!";
}
渲染結(jié)果如下:
Ricardo, Web Designer!
::BACKDROP (EXPERIMENTAL)
::backdrop偽元素是一個(gè)盒子，在全屏元素之后生成，但是在其它所有內(nèi)容之上。它經(jīng)常和:fullscreen偽類結(jié)合使用改變最大化屏幕的背景顏色 - 如果你不想使用默認(rèn)的黑色。
注意: ::backdrop偽元素需要使用雙冒號(hào)，使用單冒號(hào)不起作用。
讓我們?cè)俅卫^續(xù):fullscreen偽類的示例。
HTML:
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full scre
::FIRST-LETTER/:FIRST-LETTER
:first-letter 偽元素用來選擇文本的第一個(gè)字母。
如果第一行文本包含一個(gè)元素，如圖片，播放器或者表格，這時(shí)第一個(gè)字母不會(huì)被影響仍舊可以被選擇。
這在段落中是一個(gè)很好的應(yīng)用，如：在不需要使用圖片或者外部設(shè)置時(shí)，可以提高段落的吸引力。
提示:使用:before偽元素生成的內(nèi)容文本，即使不存在于DOM中，其文本的第一個(gè)字母可以被指定。
CSS:
h1:first-letter {
font-size: 5em;
}
::FIRST-LINE/:FIRST-LINE
:first-line偽元素指定一個(gè)元素的第一行。它旨在塊級(jí)元素中起作用，在行內(nèi)元素不起作用。
當(dāng)在段落中使用時(shí)，如:只是給段落的第一行文本改變樣式，即使文本被包裹。
CSS:
p:first-line {
background: orange;
}
選擇器優(yōu)先級(jí)
首先來看一下css選擇符(css選擇器)有哪些?
1.標(biāo)簽選擇器(如：body,div,p,ul,li)
2.類選擇器(如：class="head",class="head_logo")
3.ID選擇器(如：id="name",id="name_txt")
4.全局選擇器(如：*號(hào))
5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)
6.后代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)
7.群組選擇器 div,span,img {color:Red} 即具有相同樣式的標(biāo)簽分組顯示
8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)
9.偽類選擇器(如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。)
10.字符串匹配的屬性選擇符(^ $ *三種，分別對(duì)應(yīng)開始、結(jié)尾、包含)
11.子選擇器 (如：div>p ,帶大于號(hào)>)
12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號(hào)+)
優(yōu)先級(jí)
不同級(jí)別
在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式。
作為style屬性寫在元素內(nèi)的樣式
1、id選擇器
2、類選擇器|偽類選擇器（nth-child等）|屬性選擇器（[title]）
3、 標(biāo)簽選擇器
4、 通配符選擇器
5、瀏覽器自定義或繼承
//css
:first-child{
color:green;
}.aa{
color: red;
}[title]{
color:blue;
}
//dom
<div class="aa" title='s'>f</div>
以上css會(huì)相互覆蓋
總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器=偽類=屬性 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
參考鏈接https://www.w3cplus.com/css/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements.html
