偽類和偽元素的區別
（1）類，使用者定義的類別名，這個類別是具體的，看得見的，如div.div0，選擇具有類別div0的div元素。
（2）偽類，用於為某些選擇器添加特殊的效果。用偽類別定義的樣式並不是作用在標記上，而是作用在標記的狀態上，如a標籤的:hover，表單元素的:disabled。
（3）元素，如div、p、h1等，是實實在存在的元素。
（4）偽元素，是html中不存在的元素，僅在css中用來渲染的，偽元素創建了一個虛擬容器，這個容器不包含任何DOM元素，但是可以包含內容。如::before、::after。
偽類選擇器
偽類存在的意義是為了透過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。偽類通常表示的是一種「狀態」。偽類別由一個冒號:開頭，冒號後面是偽類別的名稱和包含在圓括號中的可選參數。
anchor偽類
如果設定a標籤的四種狀態，順序必須是LVHA，即:link、:visited、:hover、:active。
一般情況下只需要設定a標籤的預設效果和滑鼠劃過的效果，a{}、a:hover{}。
目標偽類選擇器
:target 超連結後目標樣式，當使用超連結後，連結的目標可以用目標選擇器設置，目標只有在跳轉後才會顯示對應的樣式。
a標籤的href屬性的值可以指向連結位址、標籤的id，或是a標籤的name。
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>按鈕1</a></ p><p><ahref=#news2>按鈕2</a></p><aname=news1>內容1</a><divid=news2>內容2</div>當點擊按鈕2的時候，展示結果：
表單元素偽類選擇器
:in-range只作用於能指定區間值的元素，例如input 元素中的min 和max 屬性；
:invalid只作用於能指定區間值的元素，例如|input 元素中的min 和max 屬性，及正確的email 欄位, 合法的數字欄位等
結構偽類選擇器
<style>p:first-child{color:red;}/*第一個元素是h1，所以沒有選取*/p:first-of-type{color:blue;}p:nth-child(4){ color:green;}/*第4個元素是sp an,所以沒有選取*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/*選取了第7個p，但是樣式被覆蓋了*/ p:only-of-type{color:orange;}/ *選取了第7個和第8個p*/</style><h1>標題1</h1><p>第一個p</p><p>第二個p</p><span >文字內容</span><p>第三個p</p><p>第四個p</p><p><i>文字內容</i>第五個p</p> <p>第六個p</p><h5>標題5</h5><div><p>第七個p</p></div><div><p>第八個p</ p><span>文字內容</span></div><div><p>第九個p</p><p>第十個p</p></div>運行結果：
否定偽類選擇器
偽元素
偽元素在DOM樹中創造了一些抽像元素，這些抽像元素是不存在於文件語言裡的（可以理解為html原始碼）。例如：documen介面不提供存取元素內容的第一個字或第一行的機制，而偽元素可以讓開發者可以提取到這些資訊。並且，有些偽元素可以使開發者取得到不存在於來源文件中的內容。偽元素的由兩個冒號::開頭，然後是偽元素的名稱。
簡單來說，偽元素創建了一個虛擬容器，這個容器不包含任何DOM元素，但可以包含內容。
css3中偽元素選擇器和css2中偽類選擇器中， before和after是完全相同。
偽元素只有以下幾種：
content 屬性與:before 及:after 偽元素配合使用，來插入生成內容。可以使用偽類+偽元素。
CSS樣式權重
css優先權規則：
（1）css選擇規則的權重值不同時，權重值高的優先；
（2）css選擇規則的權重值相同時，後定義的規則優先；
（3）css屬性後面加!importand 時，無條件絕對優先；
權重值的計算：