1、標簽選擇器 2、類選擇器 3、id選擇器 4、通配符選擇器（*）
5、連接類偽類選擇器（a:hover） 6、結構偽類選擇器(first-child(),last-child(),nth-child(),nth-last-child()) 7、目標偽類選擇器(:target 被選中的) 8、交集選擇器 9、並集選擇器（p,div） 10、子類選擇器（div div p） 11、屬性選擇器（
E[attr]{)屬性名
E[attr=val]{}屬性值是val的
E[attr*=val]{}屬性值包含val且在任意位置
E[attr^=val]{}屬性值含val且以val為開頭的
E[attr$=val]{}屬性值含val且以val為結束的
）
12、偽元素選擇器（
E::first-letter 文本的第一個單詞或字;
E::first-line 文本第一行;
E::selection 可改變選中文的樣式，鼠標划出選中的部分
E::befor
E::after
在div的內部的前面、或者是后面插入
）
先重點說一下偽類選擇器：
四大基本偽類選擇器（鏈接類）：
:link，用於設置鏈接初始狀態時的樣式;:visited，用於設置鏈接被點擊過后的樣式;:hover，用於設置鼠標懸停在鏈接上方時，鏈接的樣式;:active，用於設置鼠標按鍵按下，但未釋放時，鏈接的樣式
結構偽類選擇器：
:first-child 選擇某個元素的第一個子元素（IE6不支持） :last-child 選擇某個元素的最后一個子元素 :first-of-type [CSS3]選擇一個上級元素下的第一個同類子元素 :last-of-type [CSS3]選擇一個上級元素的最后一個同類子元素 :only-child [CSS3]選擇的元素是它的父元素的唯一一個了元素（IE6-8不支持） :only-of-type [CSS3]選擇一個元素是它的上級元素的唯一一個相同類型的子元素（IE6-8不支持） :nth-child() [CSS3]選擇某個元素的一個或多個特定的子元素（IE6-8不支持） :nth-last-child() [CSS3]選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算（IE6-8不支持） :nth-of-type() [CSS3]選擇指定的元素（IE6-8不支持） :nth-last-of-type() [CSS3]選擇指定的元素，從元素的最后一個開始計算（IE6-8不支持）
以下實例借用別人的博客：https://www.cnblogs.com/ndos/p/8299464.html
下面用例子來說明以上偽類的用法。
1.1 first、last和only偽類選擇器
1 <body> 2 3 <p>（$1）這個段落是其父元素（body）的首個子元素。</p> 4 5 <h1>歡迎訪問nDos的博客</h1> 6 <p>（$2）這個段落不是其父元素的首個子元素，也不是其父元素的最后一個子元素。</p> 7 8 <div> 9 <p>（$3）這個段落是其父元素（div）的首個子元素。</p> 10 <p>（$4）這個段落是其父元素（div）的最后一個子元素。</p> 11 </div> 12 13 <nav> 14 <ul>（$4）這個是ul元素，是父元素（nav）的首個子元素。。</ul> 15 <p>（$5）這個段落是其父元素（nav）的段落子元素中的首個子元素。</p> 16 <p>（$6）這個段落是其父元素（nav）的段落子元素中的最后一個子元素。</p> 17 <ul>（$7）這個是ul元素，是父元素（nav）的最后一個子元素。。</ul> 18 </nav> 19 20 <div> 21 <p>（$8）這個段落是其父元素（div）的唯一一個子元素。</p> 22 </div> 23 24 <nav> 25 <span>這個span也是父元素（nav）的一個子元素</span> 26 <p>（$9）這個段落不是其父元素（nav）的唯一一個子元素。</p> 27 </nav> 28 29 <p>（$10）這個段落是其父元素（body）的最后一個子元素。</p> 30 </body>
p:first-child { background:red; } 原理：首先p會篩選出頁面所有的<p>標簽，:first-child再從這些<p>標簽中選中是其父元素的首個子元素的<p>標簽，應用{ background:red; }這個樣式。對於上面的例子，則會給$1、$3和$8添加紅色的背景色。
p:last-child { background:yellow; } 流程是一樣的，對於上面的例子則會給$4、$8、$9和$10添加黃色的背景色。
p:first-of-type { background:red; } 與:first-child比較，除了在$1、$3和$8添加紅色的背景色外，$5和$9也將會被添加紅色的背景色。原理：首先p會篩選出頁面所有的<p>標簽，:first-of-type再從這些<p>標簽中選中排在第一位的<p>標簽。通俗的講，:first-of-type很強勢，只要某個標簽（比如div標簽）內含有<p>標簽，它不管怎么樣都會選擇一個，選擇的這個<p>標簽是div標簽中第一個出現的。
p:last-of-type { background:yellow; } 流程是一樣的，對於上面的例子則會給$4、$6、$8、$9和$10添加黃色的背景色。
p:only-child { background:red; } 原理：首先p會篩選出頁面所有的<p>標簽，然后一一確認這些<p>標簽哪些沒有任何的兄弟元素。對於上面的例子$8是沒有任何的兄弟的元素的，因此會被添加紅色的背景色。
p:only-of-type { background:red; } 與:only-child比較，除了$8以外，$9也會被添加紅色的背景色。原理就不做講解了，參照:first-of-type。
不帶參數的偽類都介紹完了，下面介紹表格中帶參數的4個偽類。
1.2 nth偽類選擇器
1 <!DOCTYPE html>
2 <html><head>
3 <style>
4 p { width:50px;float:left;text-align:center;border:1px solid gray; }
5 </style>
6 </head>
7 <body>
8 <h1>nDos的個人博客</h1>
9 <p>$1</p><p>$2</p><p>$3</p><p>$4</p><p>$5</p>
10 <p>$6</p><p>$7</p><p>$8</p><p>$9</p><p>$10</p>
11 </body></html>
上述例子在頁面中顯示的效果如下圖
先看看偽類添加之后，會產生什么樣的效果。比如下述nth偽類：
p:nth-child(odd) { background:red; } 加入之后效果如下圖所示（odd是奇數的意思）：
有意思的事情發生了，為什么不是奇數的段落背景色為紅色呢？先放下這個問題，再來看看下面這個偽類：p:nth-of-type(odd) { background:red; }，顯示效果如下圖所示：
原理（上例）：nth-child是計算body中所有的子元素（包括h1），然后按照奇偶進行排列，那么“第一個”p標簽的順序標號成為了“2”。而nth-of-type則不同，它是計算body中所有的標簽為p的子元素，其他的子元素它不管，然后按照奇偶進行排列。
至於:nth-last-child()和:nth-last-of-type()原理也是一樣的，不過它計算的方式，是倒序的。關於這兩個偽類就不多展開了。
雖然不展開:nth-last-child()和:nth-last-of-type()，但是nth-child還有東西需要展示一下，比如這個偽類p:nth-child(2n+1) { background:red; }，顯示效果與p:nth-child(odd) { background:red; }是一模一樣的，這里就不貼圖了。
其中需要說的是這個n，寫成2i+1，行不行？不行！瀏覽器認不出來，瀏覽器只認識n。當然這是規則，就不深究了，下面要繼續討論的是，它只能進行奇偶選擇嗎？再來看看這個偽類：
p:nth-child(3n+1) { background:red; } 渲染的結果如下圖所示：
因為有h1這個標簽在，所以這里計算起來有點不太好理解，下面去掉h1那個標簽。看看下圖：
原理：n是從0開始取值，逐個代入。3n+1的結果就是 1、4、7、10、13……當然例子這里沒有那么多元素。當然也可以試試：p:nth-child(5n+1) { background:red; } 等等。
甚至可以試試下面這些偽類：
p:nth-child(-n+5) { background:red; }
p:nth-child(n+5) { background:red; }
p:nth-child(n) { background:red; }
對於nth-of-type、nth-last-child和nth-last-of-type的玩法也脫離不了上面的這些東西，只不過是計算的元素標簽的集合不同，計算的開始位置不同。寫再多也是重復，就不展開了