CSS選擇器中nth-child和nth-type-child的區別

   在CSS裏選擇父元素下的第幾個子元素咱們能夠用的方法有nth-child 和nth-of-type，剛開始用的時候以爲這兩個應該效果的用法應該是同樣的，可是爲何CSS會定義兩個同樣的選擇器呢？今天我來說講本身的看法，不喜勿噴；

  如今來談談他們之間的差異：

代碼結構以下（1）：

<section>
    <p>第1個</p>
    <p>第2個</p>
    <p>第3個</p>
    <p>第4個</p>
</section>

咱們如今使用兩種方法來測試：

section p:nth-child(2){
            color: red;
        }

效果：

效果顯而易見

如今試一試nth-of-type：

  section p:nth-of-type(2){
            color: red;
        }

 

毋庸置疑，在第一種結構下，這兩種選擇器均可以很好的選擇到第二個元素。好那麼接下來咱們來試試第二種結構：

<section>
    <div>哈哈哈</div>
    <div>呵呵呵</div>
    <div>嘻嘻嘻</div>
    <p>第1個</p>
    <p>第2個</p>
    <p>第3個</p>
    <p>第4個</p>
</section>

首先咱們來試一試nth-of-type的效果：

  section p:nth-of-type(2){
            color: red;
        }

效果：

ok接下來咱們來看看nth-type的效果：

section p:nth-child(2){
            color: red;
        }

效果：

看到這種結果，你們應該知道他們倆的區別在哪裏了吧？

第一種father-ele ele：nth-child

我們單單從字面上來理解：father-ele元素下的ele元素的第n個元素。限制性挺強的，有位置限定，有元素限定，還有在父元素結構裏的位置限定，那麼我們來分析一下剛纔的代碼：

section p:nth-child(2){
            color: red;
        }

爲何這個樣式並無實現：再來看一下代碼結構

<section>
    <div>哈哈哈</div>
    <div>呵呵呵</div>
    <div>嘻嘻嘻</div>
    <p>第1個</p>
    <p>第2個</p>
    <p>第3個</p>
    <p>第4個</p>
</section>

ok，如今我來組織一下個人語言，哈哈。

咱們來分析一下這個html結構，section下有7個子元素，排行第二的是一個div內容是呵呵呵。

如今來看css代碼：他是要找，section地下的第二個元素，還要是p元素，可是呢，這裏不知足條件，因此就沒有樣式的改變。（你們懂我什麼意思了嗎）

ok咱們來看下一種：

 section p:nth-of-type(2){
            color: red;
        }

其實哈，差異就在type上：

這個代碼的意思是什麼呢，1：section下的p元素，ok找到了，有兩個。2：第二個p元素。ok找到了，幹掉它，bingo樣式改變了。

nth-of-type和nth-child的最大區別是什麼呢，就是一個type的區別，一個關注的子元素的位置，一個多了一個類型的限制。

總結：

可能個人語言讓你們搞得有點艱澀難懂，哎，我仍是一個前端的小鳥，等我到變成一個老鳥的時候可能我說的話會更加透徹，但願能夠幫助到你們，謝謝