一、偽類選擇器

偽類通過冒號(:)進行定義，它定義了元素的狀態，如點選按下、點選完等。以前都是直接操作元素的樣式，現在可為元素的狀態改樣式，看上去更“動態”。

偽類一般反映無法在CSS中輕鬆或可靠檢測到的某個元素的狀態或屬性。

偽類更多地是定義元素的狀態。

偽類選擇器：

1）E:link

2）E:visited

3）E:hover

4）E:active

5）E:not(S) 匹配不包含S的E元素

6）E:first-child

7）E:last-child

8）E:only-child

9）E:empty

10）E:checked

11）E:nth-child(n)

二、偽元素選擇器

偽物件即偽元素，表示DOM外部的某種文件結構。

偽元素改變文件結構，在結構外另加一個沒有實際存在的元素（即偽元素）。

常用偽元素：

1）E:before/E::before

2）E:after/E::after

偽元素新增圖片時與普通元素一樣要指定為塊元素、寬和高。

如p::after{content:"";background:url();display:inline-block;width:20px;height:50px;}

例：為選中的選項設定背景顏色及選中項後面加“我被選中了”

<fieldset>
	<legend>顏色最喜歡的顏色</legend>
    <ul>
    	<li><label><input type="radio" name="color-group" value="0"/><span>藍色</span></label></li>
        <li><label><input type="radio" name="color-group" value="0"/><span>綠色</span></label></li>
        <li><label><input type="radio" name="color-group" value="0"/><span>灰色</span></label></li>
    </ul>
</fieldset>
<fieldset>
	<legend>顏色喜歡的顏色</legend>
    <ul>
    	<li><label><input type="checkbox" name="color-group" value="0"/><span>藍色</span></label></li>
        <li><label><input type="checkbox" name="color-group" value="0"/><span>綠色</span></label></li>
        <li><label><input type="checkbox" name="color-group" value="0"/><span>灰色</span></label></li>
    </ul>
</fieldset>
 

<style>
 input:checked+span{ background:#F00;}
 input:checked+span::after{ content:"   我被選中了"}