CSS3選擇器 :nth-child()的用法
阿新 • • 發佈：2021-01-09
:nth-child()
:nth-child() 選擇器，該選擇器選取父元素的第 N 個子元素，與型別無關。
一、選擇列表中的偶數標籤:nth-child(2n)
二、選擇列表中的奇數標籤 :nth-child(2n-1)
三、選擇從第6個開始的，直到最後:nth-child(n+6)
四、選擇第1個到第6個 :nth-child(-n+6)
五、兩者結合使用，可以限制選擇某一個範圍，選擇第6個到第9個 :nth-child(n+6):nth-child(-n+9)
:nth-last-child() 選擇器
:nth-last-child(n) 選擇器匹配屬於其元素的第 N 個子元素的每個元素，不論元素的型別，從最後一個子元素開始計數。
n 可以是數字、關鍵詞或公式。
提示：請參閱 :nth-last-of-type() 選擇器，該選擇器選取父元素的第 N 個指定型別的子元素，從最後一個子元素開始計數。
/*選擇列表中的倒數第n個標籤 n為數字*/
:nth-last-child(n)
/*選擇倒數最後n個*/
item:nth-last-child(-n+2){}
:nth-of-type(n)
:nth-of-type(n) 選擇器匹配屬於父元素的特定型別的第 N 個子元素的每個元素.
n 可以是數字、關鍵詞或公式。
p:nth-of-type(2)
{
background:#ff0000;
}
<body> <h1>這是標題</h1> <p>第一個段落。</p> <div>測試</div> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p> <p>第五個段落。</p> </body>
總結
/* 選擇第n個，n位數字 */ :nth-child(n) /* 選擇列表中的偶數標籤 */ :nth-child(2n) /*選擇列表中的奇數標籤 */ :nth-child(2n-1) /*選擇前幾個元素 */ /*【負方向範圍】選擇第1個到第6個 */ :nth-child(-n+6){} /*從第幾個開始選擇*/ /*【正方向範圍】選擇從第6個開始的，直到最後 */ :nth-child(n+6){} /*兩者結合使用，可以限制選擇某一個範圍 */ /*【限制範圍】選擇第6個到第9個，取兩者的交集【感謝小夥伴的糾正~】 */ :nth-child(n+6):nth-child(-n+9) /*選擇列表中的倒數第n個標籤 n為數字 */ :nth-last-child(n) /*選擇倒數最後n個 */ item:nth-last-child(-n+2){}