nth-child（n）是css3中的一種選擇器，它的作用是匹配屬于其父元素的第n個(gè)元素，不論元素的類型。重點(diǎn)是“不論元素的類型這句話”，好多人容易誤解這句話。

現(xiàn)在提出一個(gè)需求，如下圖所示，將第二行和第三行的字體顏色改為紅色和藍(lán)色

<div class="father1">
    <p>1234</p>
    <p>12345</p>
    <p>12345</p>
</div>

css代碼實(shí)現(xiàn)：很容易實(shí)現(xiàn)，利用p:nth-child(2)和p:nth-child(3)分別選中第2和第3個(gè)元素不就可以了嗎？

.father1 {
  width:300px;
  height:300px;
  background-color: aqua;
  p:nth-child(2) {
      color:red;
  }
  p:nth-child(3) {
      color:blue;
  }
}

看效果圖：

我現(xiàn)在又提出了一個(gè)新的需求：還是把將第二行和第三行的字體顏色改為紅色和藍(lán)色，要求使用nth-child（n）選擇器實(shí)現(xiàn)

<div class="father1">
    <img src="./2.jpg" alt="">
    <p>12345</p>
    <span>12345</span>
</div>

那么有的人會(huì)這樣去寫css代碼：

.father1 {
  width:300px;
  height:300px;
  background-color: aqua;
  p:nth-child(1) {
      color:red;
  }
  span:nth-child(1） {
      color:blue;
  }
}

來(lái)看效果圖：

怎么沒(méi)有生效呢？咱們代碼寫的也沒(méi)有問(wèn)題啊，p:nth-child(1)：p標(biāo)簽中排列的第一個(gè)元素，span:nth-child(1)：span標(biāo)簽中排列的第一個(gè)元素嘛？沒(méi)有問(wèn)題啊，怎么回事呀？

要注意：不論其元素類型。nth-child(n)指的是在父元素中所有的元素的順序，上述html代碼中，div是父元素，img，p和span標(biāo)簽都是div的子元素，p排在第2個(gè)，span排在第3個(gè)，這才是對(duì)n的正確理解。

咱么試一試，改動(dòng)一下css代碼：

.father1 {
    width:300px;
    height:300px;
    background-color: aqua;
    p:nth-child(2) {
        color:red;
    }
    span:nth-child(3) {
        color:blue;
    }
}

效果圖：

到此這篇關(guān)于css3中nth-child()的用法的文章就介紹到這了,更多相關(guān)css3 nth-child()用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論