css常用屬性偽元素和偽元素的總結

前面幾遍中我們分別說到了id選擇器和class選擇器，以及它們的區別和聯繫，下面大家一起來探究一下神奇的為類和偽元素吧。

其實以前我對偽類和偽元素也是搞得稀里糊塗的，現在決定剝開它神秘的外衣，首先，究竟什麼是偽類？什麼是偽元素？

偽類與偽元素的理解：

官方解釋：

偽類一開始只是用來表示一些元素的動態狀態，典型的就是大家常用的鏈接的各個狀態（link、active、hover、visited），隨後css2標準
擴展了其概念範圍，使其成為了所有邏輯上存在但在文檔樹中卻無標識的「幽靈」分類。

偽元素則代表了某個元素的的子元素，這個子元素雖然邏輯上存在，但是並不實際上存在於文檔樹中，如我們平時用的after、before等。

自己粗淺的理解就是偽類就是一個無須標識的類，偽元素則是一個元素，只是不存在與文檔樹中。

關於用法：偽類別前面是冒號，偽元素前面則是兩個冒號。 E:first-child偽類，E::first-line偽元素。這是最新的css3標準，但css2中
關於after和before都使用一個冒號，這裡就需要大家注意了。而且css3還擴展了不少偽類，這裡就不提了，有興趣的自己可以去查資料。

常見應用程式:
偽類：
1.a連結樣式點擊連結 a:hover{color:red} 滑鼠懸浮字體變紅。

2.隔行變色

• 1
• 2
• 3
• 4
3
• 4

ul li:nth-child(even){background-color:#ccc}或ul li:nth-chilid(2):{background-clolor:#ccc}

偽元素：
清理浮動：
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

關於偽類別和偽元素，就講到這裡，有關偽類和偽元素，能做出很多有趣的效果。

更多css常用屬性偽元素和偽元素的總結相關文章請關注PHP中文網！