一、區別：
（1）偽元素主要是用來創建一些不存在原有dom結構樹種的元素，例如：用::before和::after在一些存在的元素前后添加文字樣式等，這些被添加的內容會以具體的UI顯示出來，被用戶所看到的，這些內容不會改變文檔的內容，不會出現在DOM中，不可復制，僅僅是在CSS渲染層加入。CSS3中建議使用::表示偽元素，如：div::before。
::before和::after這兩個偽類下有特有的屬性content，必須有這個屬性。
1、attr() 調用當前元素的屬性，可以方便的比如將圖片的Alt提示文字或鏈接的Href地址顯示出來，如下：
a:after {
content: "(" attr(href) ")";
}
2、url() / uri() 用於引入媒體文件
h1:before{
content: url(log.png);
}
3、counter() 調用計數器，可以不使用列表元素實現序號功能。
h2:before{
counter-increment: chapter;
content: "Chapter" counter(chapter) ". "
}
（2）偽類表示已存在的某個元素處於某種狀態，但是通過dom樹又無法表示這種狀態，就可以通過偽類來為其添加樣式。例如a元素的:hover, :active等。CSS3中建議使用:表示偽元素，如：a:hover
1. 原始的HTML片段，我們將在此基礎上講解偽類和偽元素
<ul>
<li>First li element</li>
<li>Secondli element</li>
</ul>
2. 偽類
1）給第二個li元素添加樣式，可以在第二個li元素上加個class
<ul>
<li>First li element</li>
<li class="second">Second li element</li>
</ul>
.second{color：#f00}
2）也可以通過偽類給第二個li元素添加樣式
可以看出：第二個li元素是dom結構里本來就存在的。
3. 偽元素
1）給第二個li元素內的第一個字母（S）添加樣式，可以給S加個span標簽，並添加一個class
<ul>
<li>First li element</li>
<li><span class=”first-letter”>S</span>econd li element</li>
</ul>
li.first-letter{color：#f00}
2)也可以通過偽元素給第二個li元素內的第一個字母（S）添加樣式
總之，
偽元素的操作對象是新生成的dom元素，而不是原來dom結構里就存在的；而偽類恰好相反，偽類的操作對象是原來的dom結構里就存在的元素。
偽元素與偽類的根本區別在於：操作的對象元素是否存在於原來的dom結構里。