對html標籤 元素 以及css僞類和僞元素的理解

標籤：這應該都知道。<br/> 、<a>、<p></p> 等都是標籤。

元素：標籤開始到結束。好比:<p>p之間的內容</p> ，紅色部分就是元素。

元素的內容：標籤開始到結束之間的部分，上述紅色部分中的「p之間的內容」，這就是元素的內容。

僞類：針對的是特殊狀態的元素。

僞元素：針對的是元素的內容。

 

比較僞類和僞元素：

這裏用僞類 :first-child 和僞元素 :first-letter 來進行比較。

僞類:

僞類 :first-child 添加樣式到第一個子元素
p>i:first-child {color: red} <p> <i>first</i> <i>second</i> </p>:first-child

 
若是咱們不使用僞類，而但願達到上述效果，能夠這樣作：

.first-child {color: red} <p> <i class="first-child">first</i> <i>second</i> </p>

即咱們給第一個子元素添加一個類，而後定義這個類的樣式。

僞元素:

僞元素 :first-letter 添加樣式到第一個字母
p:first-letter {color: red} <p>I am stephen lee.</p>:first-letter

 
那麼若是咱們不使用僞元素，要達到上述效果，應該怎麼作呢？

.first-letter {color: red} <p><span class='first-letter'>I</span> am stephen lee.</p>

即咱們給第一個字母添加一個 span，而後給 span 增長樣式。

二者的區別就是：

僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。

 

僞元素和僞類之因此難以分清，是由於他們的效果相似而且寫法相仿，css3 爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

僞類的語法：selector:pseudo-class {property:value;}

僞元素的語法：selector::pseudo-element {property:value;}

但由於兼容性的問題，因此如今大部分仍是統一的單冒號。

 

參考：

http://www.cnblogs.com/springliang/p/6202600.html

http://blog.csdn.net/sadfishsc/article/details/7047595

http://www.javashuo.com/article/p-diaxzxtr-gu.html