共同點： （1）偽元素和偽類都是和選擇器有關的； （2）偽元素和偽類都是用來新增一些特殊的效果，特殊的東西指的是其他css無法描述的東西。 不同點： （1）css偽類是用於向某些選擇器新增特殊的效果；（偽類可以看似：動作） （2）css偽元素是用於將特殊的效果新增到某些選擇器（偽元素可以看似：位置） （3）偽類用單個：表示，偽元素用兩個:: 表示 常用的偽類：  

偽類	作用
:active	將樣式新增到被啟用的元素
:focus	將樣式新增到被選中的元素
:hover	當滑鼠懸浮在元素上方時，向元素新增樣式
:link	將特殊的樣式新增到未被訪問過的連結
:visited	將特殊的樣式新增到被訪問過的連結
:first-child	將特殊的樣式新增到元素的第一個子元素
:not()	用來匹配不符合一組選擇器的元素，因為它的作用是防止特定的元素被選中，所以又稱它為反選偽類
:last-child	將特殊的樣式新增到元素的最後一個子元素

eg：（1）:first-child ：首子改樣 、:not()：除它之外改樣、:last-child：尾子改樣 <div class="not-list-layout">     <div class="item content">第一行資料</div>     <div class="item content">第二行資料</div>     <div class="item content">第三行資料</div>     <div class="item content">第四行資料</div> </div> .content:not(:last-child){ /*除了最後一行以外的樣式*/     border-bottom: 1px solid #babbc1; } .content:first-child{ /*第一行*/     background-color: pink; }  

 

常用的偽元素：

偽元素	作用
::first-letter	將特殊的樣式新增到文字的首字母/首個文字
::first-line	將特殊的樣式新增到文字的首行
::before	在某個元素之前插入某些內容
::after	在某個元素之後插入某些內容

eg：（1）::first-letter 頭改樣 <p>我只是想要一隻冰墩墩 </p> p::first-letter{    color: red; }  

 

（2）::first-line 首行改樣 <p>山不在高，有仙則名。水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青。談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子云亭。孔子云：何陋之有？</p> p::first-line{     color: pink; }