:nth-child是css3的一個比較常用的選擇器。它用於匹配屬於其父元素中的子元素，不論元素的類型。 它的參數可以是數字、關鍵詞或公式。下面講介紹它的使用方法,
nth-child的使用
html結構如下：
<div class="demo"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div>
只選取第2個元素
.demo p:nth-child(2){color:#f00} /*數字2為紅色。參數只為數字，代表選取的是第幾個元素，注意不是從0開始的*/
選取第2個及之后的元素
.demo p:nth-child(n+2){color:#f00} /*數字2,3,4為紅色。n+數字，代表選取數字后面所有的元素*/
選取第2個及之前的元素
.demo p:nth-child(-n+2){color:#f00} /*數字1,2為紅色。-n+數字，代表選取數字之前所有的元素*/
選擇奇數的元素
.demo p:nth-child(odd){color:#f00} .demo p:nth-child(2n-1){color:#f00} /*數字1,3為紅色。odd等同於2n-1的寫法*/
選擇偶數的元素
.demo p:nth-child(even){color:#f00} .demo p:nth-child(2n){color:#f00} /*數字2,4為紅色。even等同於2n的寫法*/
選擇間隔為a,偏移為吧的元素
使用公式 (an + b)。描述：表示周期的長度，n 是計數器（從 0 開始），b 是偏移值 。
.demo p:nth-child(3n+2){color:#f00} /*數字2為紅色。從2開始，間隔為3*/
辦公資源網址導航 https://www.wode007.com
nth-child的兼容
通過:first-child屬性：
.demo p:first-child{color:#f00;}/*選取第一個*/ .demo p:first-child+p+p{color:#f00;}/*選取第三個*/
通過>來實現
.demo>p+p{ color:#f00;}/*第2級之后的元素*/
通過jquery的js來實現
1 $(document).ready(function(){ 2 $(".demo p:nth-child(2)").css("color","#f00"); 3 }); 4 /*需要引入jquery文件*/
Css3其他類似選擇器
:nth-of-type() 選擇器 ——選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素. n 可以是數字、關鍵詞或公式。與:nth-child(n)不同的是后者與類型無關。
:first-of-type 選擇器匹配屬於其父元素的特定類型的首個子元素的每個元素。 提示：等同於 :nth-of-type(1)。
:last-of-type 選擇器匹配屬於其父元素的特定類型的最后一個子元素的每個元素。 提示：等同於 :nth-last-of-type(1)。
:only-of-type 選擇器匹配屬於其父元素的特定類型的唯一子元素的每個元素。
:nth-last-child(n) 選擇器匹配屬於其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。n 可以是數字、關鍵詞或公式。 提示：請參閱 :nth-last-of-type() 選擇器，該選擇器選取父元素的第 N 個指定類型的子元素，從最后一個子元素開始計數。
:nth-last-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計數。n 可以是數字、關鍵詞或公式。 提示：請參閱 :nth-last-child() 選擇器，該選擇器選取父元素的第 N 個子元素，與類型無關，從最后一個子元素開始計數。
:last-child 選擇器匹配屬於其父元素的最后一個子元素的每個元素。 提示：p:last-child 等同於 p:nth-last-child(1)。