css選擇器nth-child和nth-of-type的區別

前提

由於開發中咱們不能老是操做一個dom樣式就給一個class顯然這是不合理的，咱們儘可能用其它選擇器去代替class選擇器

舉個例子：

<ul>
    <li>我是第1個li標籤</li>
    <li>我是第2個li標籤</li>
    <li>我是第3個li標籤</li>
    <li>我是第4個li標籤</li>
</ul>
複製代碼

開發中咱們會常常使用到這樣標籤，如今咱們須要讓第二個li變藍，有同窗就想到能夠給第二個li加個class，其實這樣寫的css到最後是沒有結構可言的，比較好的作法能夠這樣寫

<style> li:nth-of-type(2){ color:blue; } </style>
複製代碼

上述的代碼就實現了咱們想要的功能，有同窗可能會想到，我開發中是使用nth-child去定位這樣的dom的，那麼上述的需求也能夠這樣實現

<style> li:nth-child(2){ color:blue; } </style>
複製代碼

那麼問題就來，這兩個css選擇器的做用是同樣的嗎？實際上仍是有差異，搞清楚它們的做用，方便的咱們的開發，由於我以前只是瞭解，不清楚它們的區別，致使開發過程不知不覺就出現樣式污染的bug

nth-child和nth-of-type的區別

首先咱們來看個例子🌰:

<div>
    <span>
      我是第一個span標籤
    </span>
    <p>
      我是第1個p標籤
    </p>
    <p>我是第2個p標籤</p><!--我想選中的元素-->
  </div>
複製代碼

咱們想要選中上述的第二個p元素，那接下來咱們用這兩個選擇器來實現咱們的效果吧

nth-of-type選擇器的實現:

<style type="text/css"> p:nth-of-type(2){ color:red; } </style>
複製代碼

效果圖以下:

nth-child選擇器的實現:

<style type="text/css"> p:nth-child(2){ color:red; } </style>
複製代碼

效果圖以下:

• nth-child這個選擇器沒有實現咱們想要的結果，這個差異就很明顯就能夠看出來了，nth-child這個選擇器是相對於父級來講的，p:nth-child(2)你能夠翻譯爲父級的第二個元素而且是p標籤，若是有就選中，不然就不選

舉個例子：

<style> section>:nth-child(1){ color:red; } </style>
<section>
      <p>第一個p標籤</p> <!--要選中的元素-->
      <div class="first">
        第一個div標籤
         <div>我是第1個div標籤的第一個子標籤</div>
      </div>
      <div>我是第2個div標籤</div>
      <div>我是第3個div標籤</div>
      <div>我是第4個div標籤</div>
  </section>
複製代碼

效果圖以下:

能夠看到咱們沒有明確選擇器的具體類型，它就是匹配到第二個無論是什麼標籤

ps:留個小陷阱選擇器若是寫成 section :nth-child(1)會出現什麼效果

• 而nth-of-type選擇器是相對於本身來講的，p:nth-of-type(2) 這個選擇器的意思是在父級標籤下全部的次級p標籤中的第二個p，這個選擇器會去找父級標籤下的p標籤直到找到第二個其間無論第二個p標籤有多少不一樣的兄弟元素,而且要nth-of-type指定具體類型,否則就報錯

總結

咱們得清楚css僞類選擇器的具體使用才能在寫頁面的時候少花功夫，避免樣式污染和干擾，把更多的精力放在js層方面