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

現在提出一個需求，如下圖所示，將第二行和第三行的字體顏色改為紅色和藍色

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

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

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

看效果圖：

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

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

那么有的人會這樣去寫css代碼：

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

來看效果圖：

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

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

咱么試一試，改動一下css代碼：

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

效果圖：

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

最新評論