該選擇器，雖然之前用的也不少，但感覺理解的不是特別好，使用的時候效率太低，所以今天就總結一下，嗯
:nth-of-type() css 偽類 匹配同型別中的第n個同級兄弟元素。
先來看個簡單的例子理解一下上面的意思：
html**如下
one
我是div
twothree
four
five
six
首先肯定是p標籤裡的背景變紅，通俗一點理解p:nth-of-type(3)代表的就是，所有兄弟節點中找標籤為p的，然後找到的第三個p標籤背景為紅色
所以，three背景為紅咯
注意：不要和:nth-child(n)搞混了，上面的背景變黃的是two，因為，該選擇器是找父元素的第三個子元素，如果該子元素為p，則其變為黃色，如果，第三個子元素不是p元素，則沒有子元素的背景變為黃色
ok，回到我們今天討論的重點:nth-of-type(n)
:nth-of-type(n)：n可以是乙個數字，乙個關鍵字，或者乙個公式。
數字，我就不多說了，注意是從1開始的哦（不是從0）
關鍵字：可選的有：odd（奇數）、even（偶數）
#wrap p:nth-of-type(even)公式：使用公式（an+ b）.描述：a代表乙個迴圈的大小，n是乙個計數器（從0開始），以及b是偏移量。
怎麼理解吶？
比如像上面的想要讓偶數p變為紅色背景，那麼用公式就是：
#wrap p:nth-of-type(2n)個人還是比較喜歡用公式的，功能真的很強大，比如我們想要讓奇數的變紅公式就是2n+1嘍，想要讓3的倍數的變紅，公式就是3n啦，依次類推。
哦，說說一下，相容性
選擇器chrome
iefirefox
safair
opera
:nth-of-type()
4.09.0
3.53.2
9.6嗯、其實整理完，也很簡單啦，希望看完的你也有這樣的感覺。
CSS3中的animation詳解
keyframes具有其自己的語法規則，他的命名是由 keyframes 開頭，後面緊接著是這個 動畫的名稱 加上一對花括號 括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於乙個 keyframes 中的樣式規則是由多個百分比構成的，如 0 到 100 之間，我們可以在這個規則...
css3中的animation詳解
它是乙個動畫復合屬性，有以下的屬性 animation name 動畫名稱 animation duration 動畫的持續時間 animation timing function 動畫的過渡型別，運動函式 animation delay 動畫延遲的時間 animation iteration co...
CSS3中REM使用詳解
在頁面中設定字型，我們知道有常見的兩種，px 和 em.在web頁面製作中，我們一般使用 px 來設定我們的文字，因為他比較穩定和精確。但是這種方法存在乙個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，他改變了瀏覽器的字型大小 雖然一般人不會去改變瀏覽器字型大小 這時會使用我們的web頁面布局...