偽類和偽元素的區(qū)別

（1）類，用戶定義的類名，這個(gè)類是具體的，看得見的，如div.div0，選擇具有類div0的div元素。

（2）偽類，用于向某些選擇器添加特殊的效果。用偽類定義的樣式并不是作用在標(biāo)記上，而是作用在標(biāo)記的狀態(tài)上，如a標(biāo)簽的:hover，表單元素的:disabled。

（3）元素，如div、p、h1等，是實(shí)實(shí)在在存在的元素。

（4）偽元素，是html中不存在的元素，僅在css中用來渲染的，偽元素創(chuàng)建了一個(gè)虛擬容器，這個(gè)容器不包含任何DOM元素，但是可以包含內(nèi)容。如::before、::after。

偽類選擇器

偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。偽類通常表示的是一種“狀態(tài)”。偽類由一個(gè)冒號(hào):開頭，冒號(hào)后面是偽類的名稱和包含在圓括號(hào)中的可選參數(shù)。

anchor偽類

如果設(shè)置a標(biāo)簽的四種狀態(tài)，順序必須是LVHA，即:link、:visited、:hover、:active。

一般情況下只需要設(shè)置a標(biāo)簽的默認(rèn)效果和鼠標(biāo)劃過的效果，a{}、a:hover{}。

目標(biāo)偽類選擇器

:target 超鏈接后目標(biāo)樣式，當(dāng)使用超鏈接后，鏈接的目標(biāo)可以用目標(biāo)選擇器設(shè)置，目標(biāo)只有被跳轉(zhuǎn)后才會(huì)顯示對(duì)應(yīng)的樣式。

a標(biāo)簽的href屬性的值可以指向鏈接地址、標(biāo)簽的id，或者a標(biāo)簽的name。

<style>
:target  {
     font-size:20pt;
     border:1px solid gray;
}
div:target  {
     background-color:#ccc;
}
</style>
<p><a href="#news1">按鈕1</a></p>
<p><a href="#news2">按鈕2</a></p>

<a name="news1">內(nèi)容 1</a>
<div id="news2">內(nèi)容 2</div>

當(dāng)點(diǎn)擊按鈕2的時(shí)候，展示結(jié)果：

表單元素偽類選擇器

:in-range只作用于能指定區(qū)間值的元素，例如 input 元素中的 min 和 max 屬性；

:invalid只作用于能指定區(qū)間值的元素，例如 |input 元素中的 min 和 max 屬性，及正確的 email 字段, 合法的數(shù)字字段等

結(jié)構(gòu)偽類選擇器

 <style>
    p:first-child{color:red;}/*第一個(gè)元素是h1，所以沒有選中*/
    p:first-of-type{color:blue;}
    p:nth-child(4){color:green;}/*第4個(gè)元素是span,所以沒有選中*/
    p:nth-of-type(4){color:pink;}
    p:only-child{color:yellow;}/*選中了第7個(gè)p，但是樣式被覆蓋了*/
    p:only-of-type{color:orange;}/*選中了第7個(gè)和第8個(gè)p*/
</style>
<h1>標(biāo)題1</h1>
<p>第一個(gè)p</p>
<p>第二個(gè)p</p>
<span>文字內(nèi)容</span>
<p>第三個(gè)p</p>
<p>第四個(gè)p</p>
<p><i>文字內(nèi)容</i>第五個(gè)p</p>
<p>第六個(gè)p</p>
<h5>標(biāo)題5</h5>
<div><p>第七個(gè)p</p> </div>
<div><p>第八個(gè)p</p> <span>文字內(nèi)容</span></div>
<div><p>第九個(gè)p</p> <p>第十個(gè)p</p></div>

運(yùn)行結(jié)果：

否定偽類選擇器

偽元素

偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內(nèi)容的第一個(gè)字或者第一行的機(jī)制，而偽元素可以使開發(fā)者可以提取到這些信息。并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容。偽元素的由兩個(gè)冒號(hào)::開頭，然后是偽元素的名稱。

簡(jiǎn)單來說，偽元素創(chuàng)建了一個(gè)虛擬容器，這個(gè)容器不包含任何DOM元素，但是可以包含內(nèi)容。

css3中偽元素選擇器和css2中偽類選擇器中， before和after是完全相同。

偽元素只有以下幾種：

content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容?？梢允褂脗晤?偽元素。

CSS樣式權(quán)重

css優(yōu)先級(jí)規(guī)則：

（1）css選擇規(guī)則的權(quán)重值不同時(shí)，權(quán)重值高的優(yōu)先；

（2）css選擇規(guī)則的權(quán)重值相同時(shí)，后定義的規(guī)則優(yōu)先；

（3）css屬性后面加 !importand 時(shí)，無條件絕對(duì)優(yōu)先；

權(quán)重值的計(jì)算：