偽對象也叫偽元素，在過去，偽類和偽元素都被書寫成前面只加一個冒號，實際上應該是：
：weilei ：：偽元素 而現在我們為了兼容舊的書寫方式，用一個冒號引導偽類也是能被解析的。
偽類一般反應無法在CSS中輕松或者可靠檢測到的某個元素的 狀態或屬性 ；
偽元素表示DOM外部的某種 文檔結構 。
偽類更多的是定義元素的狀態，而偽元素則是改變文檔結構，在結構外另加一個沒有實際存在的元素（偽元素）
常用偽元素：
1. E：before/E：：before
2. E：after/E：：after
1. E：before/E：：before
before 選擇器在被選元素的“內容”前面插入內容，用來和content屬性一起使用。
雖然E：before可轉化為E::before，但是你寫偽元素是要規范，用兩個冒號。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:nth-child(2){font-size: 30px; color: orange;}
ul::before{content:"這是ul的偽元素"; color: blue;}
ul::after{content:"這是之后的偽元素";}
</style>
</head>
<body>
<ul>
<li>劉亦菲</li>
<li>范冰冰</li>
<li>楊冪</li>
<li>袁姍姍</li>
</ul>
</body>
</html>
顯示為：
是顯示在被選中標簽內容之前和之后。
2. E：after/E：：after
after選擇器在被選擇元素的“內容”前面插入內容，用來和content屬性一起使用
雖然E：before可轉化為E：：before，但是你寫偽元素時要規范，用兩個冒號。
content屬性與：：before及：：after偽元素配合使用，來插入生成內容。偽元素還可以添加圖片。
checked + 偽元素練習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:checked+span{background: red;}
input:checked+span::after{content: " 我被選中了";}
</style>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>點擊你喜歡的明星</legend>
<ul>
<li>
<label>
<input type="radio" name="star" /><span>范冰冰</span>
</label>
</li>
<li>
<label>
<input type="radio" name="star" /><span>李冰冰</span>
</label>
</li>
<li>
<label>
<input type="radio" name="star" /><span>楊冪</span>
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>以下是多選</legend>
<ul>
<li>
<label>
<input type="checkbox" name="多選" /><span>驚天魔盜團</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="多選" /><span>魔獸</span>
</label>
<li>
<label>
<input type="checkbox" name="多選" /><span>北京遇上西雅圖</span>
</label>
</li>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
顯示為：
此例用到了：
相鄰選擇符（E+F）
選擇緊貼在E元素之后的F元素，用加號表示。選擇相鄰的第一個兄弟元素。
還有after