終於搞明白了僞類和僞元素

這兩天就跟僞類和僞元素槓上了，查了好多文檔還有技術博客，惟獨忘去查根本，罪過罪過，今天看了w3school，豁然開朗。

先來看w3school對僞類的解釋

CSS 僞類用於向某些選擇器添加特殊的效果。

再來看有哪些僞類

僞類

W3C："W3C" 列指示出該屬性在哪一個 CSS 版本中定義（CSS1 仍是 CSS2）。

屬性	描述	CSS
:active	向被激活的元素添加樣式。	1
:focus	向擁有鍵盤輸入焦點的元素添加樣式。	2
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。	1
:link	向未被訪問的連接添加樣式。	1
:visited	向已被訪問的連接添加樣式。	1
:first-child	向元素的第一個子元素添加樣式。	2
:lang	向帶有指定 lang 屬性的元素添加樣式。	2

再來看僞元素

CSS 僞元素用於向某些選擇器設置特殊效果。

僞元素

W3C："W3C" 列指示出該屬性在哪一個 CSS 版本中定義（CSS1 仍是 CSS2）。

屬性	描述	CSS
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素以前添加內容。	2
:after	在元素以後添加內容。	2

 

看出來了吧，他們都是向某些選擇器添加特殊效果，都是一些特殊選擇器，功能是同樣的。

後來css3爲了區分僞元素和僞類，規定僞元素用雙冒號::，因此無論:before、:after，仍是::before、::after，他們都是僞元素，歷來都不是僞類，因此像我同樣傻傻搞不清的小夥伴，這下分清了吧。

僞類，起的做用跟類是同樣的，做用於標籤；僞元素，做用於元素內容；好比

 1 <style>
 2         /*僞類*/
 3  p:first-child{
 4  color:red;
 5         }
 6         /*僞元素*/
 7  p:first-letter{
 8  color:green;
 9         }
10 </style>
11 <p>我是第一個P</p>
12 <p>我是第二個P</p>

效果

 

若是用類來替換他們實現一樣的效果

 

 1 <style>
 2         /*僞類*/
 3  .p-first-child{
 4  color:red;
 5         }
 6         /*僞元素*/
 7  .p-first-letter{
 8  color:green;
 9         }
10 </style>
11 <p class="p-first-child"><span class="p-first-letter">我</span>是第一個P</p>
12 <p><span class="p-first-letter">我</span>是第二個P</p>

 

效果同樣

羅嗦一堆，但願能對像我同樣的菜鳥起點做用，大神勿噴~想要更詳細的就去看w3school