僞類和僞元素的區別

w3c 對二者的定義:
• CSS 僞類用於向某些選擇器添加特殊的效果。
• CSS 僞元素用於將特殊的效果添加到某些選擇器。
小七想說是否是一臉懵逼?好我小七來個定義僞就是「假」的意思,僞類就是建立了一個假的類名;僞元素就是建立了一個假的元素標籤。什麼?尚未理解那來動真格的,舉例:你想給ul裏面的第一個li改變背景
<ul>
<li>1</li>
<li>2</li>
</ul>
通常方法就是給第一個li加一個類名而後css樣式 .first{background:red}就搞定了
<ul>
<li class=」first」>1</li>
<li>2</li>
</ul>
那麼使用僞類的方法li:first-child{background:red}能夠達到一樣的效果,因此說僞類就是至關於建立了一個假的類名,而實際他沒建立就能夠達到效果,是否是很爽啊!
一樣舉例說明僞元素(就是建立了假的元素):如讓<p>啊啦啦啦</p>裏面的啊變顏色咱們的通常作法是<p><span>啊</span>啦啦啦</p>而後span{color:red}
可是用僞元素就不用建立新元素span了,直接p::first-letter{color:red}就能夠搞定了是否是很爽啊,至關於建立了一個假的元素span然而實際並無建立
由上總結:僞類和僞元素的區別就是一個是效果相似與建立類名一個是效果相似與建立元素標籤
CSS3規範中的要求使用雙冒號(::)表示僞元素,以此來區分僞元素和僞類,大概的意思就是:雖然CSS3標準要求僞元素使用雙冒號的寫法,但也依然支持單冒號的寫法。爲了向後兼容,咱們建議你在目前仍是使用單冒號的寫法。css

圖片出處:http://web.jobbole.com/86181/web

相關文章
相關標籤/搜索