css偽類和偽元素的區別，在css3中，實際上的偽元素應該只有::before和::after兩個了，這兩個元素是實際存在在dom中的，而類本身就是表示元素的狀態，所以偽類應該也是為了表示元素的狀態的。
在css3中，可以直接用::還是:來區分偽類和為元素了。
由於偽類主要是表示元素的狀態，那麼偽類的主要功能也就是為元素新增樣式的，偽類可以分為下面幾種：
鏈結偽類
在css剛出來的時候，最經常使用的偽類應該就是:active等為鏈結新增樣式的偽類了。表示鏈結的當前狀態，啟用、已被訪問過等等，這些偽類基於鏈結當前已經被進行過的操作，來在樣式上對使用者進行反饋。
事件偽類
有一些dom事件也會觸發偽類，比如當滑鼠劃過乙個元素時候會觸發的:hover偽類，比如當乙個元素獲得焦點時候的:focus偽類，比如當乙個checkbox被勾選時候的:checked偽類，這些偽類的觸發基本上都和dom事件有一定的關係。
偽類選擇器
有一些偽類完全是為了進行元素選擇而使用的。比如經常使用的幾個子選擇器：
/* 這樣只會選擇到無序列表的第乙個子元素，不會選擇有序列表的元素 */
ul>li
:first-child
style>
unorder list 1li>
unorder list 2li>
ul>
order list 1li>
order list 2li>
ol>
/* 由於中間的空格，這裡會選擇到第乙個span和第乙個em */
div:first-of-type
/* 這樣只會選擇到第乙個span元素 */
div > span
:first-of-type
style>
this span will be choosenspan>
this span will not be choosenspan>
this em will be choosenem>
div>
/* 下面第一組css選擇器得到的效果和後面兩組選擇器結合得到的效果是一樣的 */
ul > li
:not(
:last-child)
ul > li
ul > li
:last-child
偽元素在css3中和偽類有著明顯的區別，偽元素使用兩個冒號來作為開始，其中最常用的兩個偽元素是::before和::after偽元素，這兩個偽元素主要是用來在乙個元素的前面或者後面新增乙個元素的。而::first-letter和::first-line兩個偽元素還是主要用於選擇，來選擇一段文字的第乙個字元或者第一行。
如果為了相容性(雖然現在大部分**都放棄了ie8的支援)，可以使用css2中的單冒號偽元素寫法，但是在mdn上還是建議使用新的雙冒號寫法更容易區分。
::first-letter&::first-line
這兩個偽元素選擇器看起來和偽類選擇器沒有什麼太大的區別，但是這兩個選擇器匹配的其實不是在dom中真實存在的元素，是將乙個文字塊作為其選擇的元素，然後為其新增樣式的。
當前版本中，只有一部分css可以對於這兩個偽元素進行使用。
其本質上就相當於動態地構建乙個假的dom元素，並且將第乙個字元或者是第一行文字放入這個元素中並且為其應用樣式。
下面的**可以得到每一段本文首字母都會放大並且首行行高變成兩倍的效果。
article > p
::first-letter
article > p
::first-line
style>
lorem ipsum dolor sit amet, consectetur adipisicing elit. velit eos qui ab pariatur, iure itaque modi ut, cupiditate beatae omnis. alias sit sequi aliquid ad dolore, non autem nisi aperiam.
p>
lorem ipsum dolor sit amet, consectetur adipisicing elit. amet, modi. corrupti animi, cumque doloremque eveniet impedit veniam iure recusandae, distinctio, adipisci ea illo magnam non, cum omnis ad! excepturi, est!
p>
article>
::before&::after
這兩個偽元素分別會在相應的元素前後建立乙個偽元素，並且選中它。這個偽元素預設情況下是行內元素。
這兩個偽元素經常用來進行元素的修飾，比如給某個按鈕新增乙個作為標籤，製作乙個聊天氣泡的效果，製作類似於**的效果，為乙個元素新增類似注釋的內容。
這兩個偽元素的使用大多是發散思維，當需要設定某個元素的一些附加內容，並且需要這個附加內容和當前元素有一定的關聯，但是又不是很容易直接在元素內部實現的話，使用這兩個偽元素是很合適的。
偽元素被認為是其依附的元素的子元素，可以使用position的套件來讓該偽元素相對於其父元素進行定位。
js bin的乙個偽元素聊天氣泡的demo
偽元素和偽類主要是用來css中對於元素進行選擇的。
偽元素使用雙冒號，在css3當中。
偽元素可以建立乙個新的，但是不真實存在dom中的元素。
偽類選擇器的組合可以實現很多原本需要非常複雜的選擇器組合才能夠得到的選擇器效果。
css3 偽元素和偽類
1，定義 w3c定義 偽元素偽類 都可以向某些選擇器設定特殊效果。css2中定義 css3中的定義 1 偽元素 在dom樹中建立了一些抽象元素 虛擬的容器 由兩個冒號 開頭 css2中並沒有區別 為了相容性一般還是寫乙個冒號 2 偽類 為了選擇器找到那些不存在於dom樹中的資訊 及 不能被常規css...
css3新增的偽類和偽元素
e target事件屬性可返回事件的目標節點 觸發該事件的節點 如生成事件的元素 文件或視窗 e disabled表示不可點選的表單控制項 e enabled表示可點選的表單控制項 e checked表示已選中的checkbox或radio e f 表示e元素毗鄰的f元素 e not s 表示e元素...
CSS和CSS3中的偽元素和偽類（總結）
好多人偽類和偽元素分清楚，其實就是一句話，偽類的效果可以通過新增乙個實際的類來達到，而偽元素的效果則需要通過新增乙個實際的元素才能達到 css中偽類包括 first child lang active focus hover link visited css中偽元素包括 first letter f...