偽類和偽元素的區別

偽類與偽元素的特性及其區別：

1. 偽類本質上是為了彌補常規CSS選擇器的不足
2. 偽元素本質上是創建了一個有內容的虛擬容器
3. CSS3中偽類和偽元素的語法不同；     偽類  :link  :hover         偽元素  ::before    ::after   (偽類單冒號,偽元素雙冒號)
4. 可以同時使用多個偽類，而只能同時使用一個偽元素；

5. 偽類和偽元素的根本：是否創造了新的元素,  這個新創造的元素就叫  "偽無素" 。

   偽元素/偽對象：不存在在DOM文檔中，是虛擬的元素，是創建新元素。 這個新元素(偽元素)  是某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中.

　　　  偽類：存在DOM文檔中，(無標簽,找不到,  只有符合觸發條件時才能看到 ),  邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。

　　6.  因為偽類是類似於添加類所以可以是多個，而偽元素在一個選擇器中只能出現一次，並且只能出現在末尾 

　　7.   W3C中對於二者應用的描述(描述太模糊, 不容易理解)：

• • 偽類：用於向某些選擇器添加特殊的效果
  • 偽元素：用於將特殊的效果添加到某些選擇器(標簽

 

:after/::after和:before/::before的異同

 

相同點

• 都可以用來表示偽類對象，用來設置對象前的內容
• :before和::before寫法是等效的; :after和::after寫法是等效的

不同點

• :before/:after是Css2的寫法，::before/::after是Css3的寫法
• 所以css2的要比css3的兼容好    ,,  :before/:after 的兼容性要比::before/::after好 ， 

 

• 不過在H5開發中建議使用::before/::after比較好(易區分)

注意：

1. 偽對象要配合content屬性一起使用(!!!沒有設置content不生效)
2. 偽對象不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
3. 偽對象的特效通常要使用:hover偽類樣式來激活

eg:當鼠標移在span上時，span前插入”duang”

1. < style>
2.  　　 

   span{
3.                 

   background: yellow;
4.            

   }
5.            

   span:hover::before{
6.                 

   content:"duang";
7.            

   }
8.   

   </ style>
9.   
10.   

    < span>222</span>