有時候我們需要将子标簽浮動起來，但是浮動起來後，父标簽的樣式又用不上，比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: red;">
<div style="float: left;">僞元素與僞類（一）</div>
<div style="float: left;">僞元素與僞類（二）</div>
</div>
</body>
</html>
父标簽中的背景是紅色，但是由于添加了style="float:left"導緻顯示的内容失去了定義的背景:
為了了解決該問題，我們可以有兩種方法:
①在代碼中添加如下綠色部分:
<div style="clear: both;"></div>
再重新整理頁面:
該方法就是在浮動标簽的最底部添加<div style="clear: both;"></div>就可以實作父标簽生效的功能。
②在用到布局，肯定會用到float，用到float就會與原來的父标簽的樣式脫離，為了解決該問題，可以在寫樣式的時候額外寫一個如下樣式:
.clearfix:after{
content:".";
visibility:hidden;
display:block;
height:0
clear:both;
}
是以具體代碼為:
<style>
.backs{
background-color: red;
}
.clearfix:after{
content:".";
visibility:hidden;
display:block;
height:0
clear:both;
</style>
<div class="backs clearfix">
運作代碼顯示效果跟第一種方法一樣:
從以上兩個例子引出我們今天的主題，僞類和僞元素
首先，閱讀
w3c
-
CSS
-
CSS
可以明确兩點，第一兩者都與選擇器相關，第二就是添加一些“特殊”的效果。這裡特殊指的是兩者描述了其他
css
無法描述的東西。
僞類種類
僞元素種類
差別
這裡用僞類
:first-child
和僞元素
:first-letter
來進行比較。
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> 即我們給第一個子元素添加一個類，然後定義這個類的樣式。那麼我們接着看看為元素：
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
為了區分兩者，已經明确規定了僞類用一個冒号來表示，而僞元素則用兩個冒号來表示。
:Pseudo-classes::Pseudo-elements 但因為相容性的問題，是以現在大部分還是統一的單冒号，但是抛開相容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。