nth-child和nth-of-type這倆偽類有毛關係？

今天睡到了自然醒，起床之後老婆非要拉著出去逛逛。正中我的下懷，朕正有此意！於是收拾一下就牽著媳婦兒的手點上一根菸打個公交就奔著公園衝了過去。因為是週末人還挺多，看來我今天的決定是對的，好多黑絲美女啊。看的我的口水都快飛出來了。哈哈哈哈~ 來上一張福利圖撩撥下心絃~~

很養眼不是麼？估計有人會說這有啥好看的，不做評價，我只想陳述下我的一個觀點“有故事的男人都會欣賞穿著黑色絲襪的女人”。突然間腦洞大開，如果我真的穿越回古代併成為君王，嘿嘿嘿~ 每天晚上會很精彩啊。不過也不好，古代沒有黑絲，還是現代好。這樣吧，如果我是超級土豪，弄上幾十個超級嫩模，買下一個島，全TM給我穿上黑絲，老子要玩個遍~

咳咳~還是有點節操的好。如果真是有幾個黑絲妹子侍寢的話，這個排序就有問題了。排序？嗯氣泡排序和歸併排序都是……我艹怎麼說到演算法了，我是前端啊，要從前端的角度去考慮問題。如何選擇她們中的某位或某幾位“侍寢”這個任務需要怎麼弄？估計每天都會在這樣的問題中煩躁不已吧。

屬性選擇器是個不錯的方案，我先給她們……呸呸_{！我是有錢人吶} 有錢人就應該任性啊，什麼罩杯啊、腿長啊、臉型啊、膚色啊，我沒那個閒功夫去標識每一個妹子。讓她們在我面前站一排，點到幾號就是幾號。不搞那麼多彎彎繞，簡單粗暴的偽類:nth-child直接搞定。如果對偽類和偽元素的區別不是很明白的，猛戳後面的連結>>>>>《偽類與偽元素，傻傻分不清楚》。

來來~ 來都站我面前，我要開始點號了啊~ 比如我選中了三號！來吧，跟朕去寢宮~

真方便啊~指哪打哪，沒有誤差。好的很，如果這個時候在一群黑絲妹子中間混入了一個肉絲妹子，偶爾換換口味還是不錯的，朕就勉為其難的選一下吧，繼續偽類:nth-child來選擇，來看圖。

我擦類這是要造反了啊，沒有反應？竟然不聽我的話了。我覺得此刻的心情是沉重的，剛剛晉升超級土豪的優越感瞬間土崩瓦解。這個故事告訴我們一定要好好學習，工具一定要運用熟練，不然妹子都不跟你走啊~ 當然我們手裡面還有一個和其功能類似的:nth-of-type可以使用，為了不重蹈丟臉的覆轍，還是潛心研究下的好。安全第一~~

要說:nth-child和:nth-of-type這倆位，還真是有點小差異。我寫了一個DEMO，可以通過實驗來感受下，這倆偽類是個啥情況>>>>>>《nth-child和nth-of-type實驗》。

和剛才的情況一樣，當我用:nth-child(3)的時候所有的“妹子”——<li>和<p>都沒有反應。

當我用:nth-child(4)的時候第三個“黑絲妹子”——<li>產生了反應。

需要注意的是這第三個“黑絲妹子”同時又是“妹子佇列”——<ul>當中的第四個“妹子”。下面迫不及待的要用:nth-of-type來試驗下了，:nth-of-type(3)的情況如下。

:nth-of-type(3)直接選中了第三個“黑絲妹子”——<li>，而通過點選DEMO中單選框能看到當:nth-of-type(2)的時候選中的是第二個“黑絲妹子”——<li>，這傢伙直接把<p>給隔了過去，太任性了，看都不看一眼，直接跳過！相信看到這裡，對:nth-child和:nth-of-type已經是一目瞭然了。

偽類li:nth-child(×)：選中第×個並且同時是“黑絲”——li的元素。如果第×個不是“黑絲”——li則視為“未選中”。

偽類li:nth-of-type(×)：選中第×個“黑絲”——li元素，並不考慮同級中是否有其他元素。

其實從這倆偽類的名字就可以看出端倪，child就是指子元素，type就是型別。從選擇方式上看child比type的條件更嚴格一點。啊哈~~！這倆貨也不過如此……just so easy!!!

最後值得提一嘴的是，上面例子中如果想選擇“肉絲”——<p>的話，則有多種寫法。我全部列出來，建議你先想一想再往下面看，看看你想的和我所想的是不是一樣。

。
。
。
。
。
。
。
。
。
。
。
。

ul p:nth-child(3){ color:red;}
 
ul p:nth-of-type(1){ color:red;}
 
ul *:nth-child(3){ color:red;}
 
ul *:nth-of-type(3){ color:red;}

建議自己敲下程式碼來親自驗證下……

:nth-child()和:nth-of-type()裡面填寫的數字叫匹配子元素的下標，第一個子元素的下標是1，以此類推。，這是很“耿直的”一種方式。括號裡面說是幾就是第幾，寫1就是第一，寫2就是第二。你也可以填寫0，不過下標為0的子元素是不存在的，所以匹配不上不會生效。這個和陣列的概念不一樣，陣列中的下標是從零開始的。不過按照IT圈的尿性理論上應該還有兩個“逆行”偽類與之對應才對。如果考慮到這點了，我就預先恭喜你在技術細節的積累上打了一個漂亮的“擦邊球”，走了點捷徑來提升效率。:nth-child()對應的就是:nth-last-child()；:nth-of-type()對應的就是:nth-last-of-type()。如果你在這兩個偽類的括號裡面的數字你寫了阿拉伯數字1，那麼就是倒數第一個的意思。是不是很帶感？！

現在我們一下子掌握了四個偽類:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()。要知道偽類的數量不是太多，這下子進步的尺度有點微大啊。先別得意的說，“世間萬物有一利必有一弊”。這幾個偽類的弊端就是不能同時主觀的去指定任意多個數。什麼叫“主觀的”指定任意多個數呢？就是說:nth-child(3,8,100)這種形式是無效的，沒有任何作用的，屬於“違法”的。想這樣寫的洗洗睡吧~！不信的自己敲程式碼看看……我懶的在這種錯誤中浪費時間，所以不貼程式碼了。

是不是有點失望？沒關係我們的偽類帶有()，這就說明了一些問題，具體是什麼問題呢？我抽根菸之後再來傳授裝逼絕學——！！！

好了，繼續進行。在程式設計中帶()的幾乎都是函式，括號裡面就是引數。我們前面的例子中寫的阿拉伯數字就是引數。但是上面也說了這種引數的形式不能是“主觀的”指定任意多個數。那麼關於這個偽類的括號裡面到底能寫上一些什麼呢？還是老方式——查資料，敲程式碼。

就常用的方式來說有兩種形式：一種是固定的英文引數。估計一提英文很多英語不是很好的人會頭大，不要緊英文引數只有兩個，分別是odd奇數和even偶數，你可能會說我記不清楚到底那個代表了奇數啊，簡單~記住“基地”這個詞，也就等於記住了“奇數是odd”。eg::nth-child(odd)就是選擇所有下標為奇數的子元素。

第二種方式就是表示式。比如填寫n，n是大於等於零的整數。例如:nth-child(n)就是從下標為零的元素開始逐一匹配直到最後一個子元素。2n就是代表偶數下標相當於even；2n+1代表所有的奇數下標就相當於odd。

是時候展現你數學功底的時候了……看看你能腦洞開到什麼程度，如果數學公式利用的很666，那麼用這幾個偽類肯定能作出非常驚豔的效果。怎麼使用還是要看自己的想象力。

另外文件中說引數n可以是數字、關鍵詞或公式。數字和公式都好理解，這個關鍵詞是什麼個意思，沒有搞明白。做了半天實驗，也不知道是什麼的關鍵詞，如果有人知道麻煩告訴我一聲，感激不盡！！~~拉臭臭的時候腦子不知道怎麼了就轉到了這倆偽類上了，突然意識到關鍵詞其實就是上一段文字中說的odd/even，瞬間覺得自己好low!

我不寫了，因為這會兒“翔意十足”，扛不住要去拉臭臭~~~888