選擇器描述

ul li:first-child	選中ul父元素中的第一個li子元素
ul li:last-child	選中ul父元素中的最后一個子元素
ul li:nth-child(n)	選中ul父元素中的第n個子元素
ul li:nth-child(odd)	選中為奇數下標的li元素
ul li:nth-child(even)	選中為偶數下標的li元素
ul li:nth-child(2n)	選中為偶數下標的li元素（n為自然數 初值為0 依次+1遞增，2n 表示是 20=0 21=2 22=4 23=6 24=8 25=10 這樣子遞增下去）
ul li:nth-child(3n+1)	選中為1 4 7 10這樣順序的下標li元素（n為自然數 初值為0 依次+1遞增，3n+1 表示是 30+1=1 31+1=4 3*2+1=7 這樣子遞增下去）
ul li:nth-child(-n+5)	選中前五個li元素 （n為自然數 初值為0 依次-1遞增，-n+5表示是 5+0=5 5+[-1]=4 5+[-2]=3 這樣子遞增下去）
ul li:nth-child(n+5)	選中第五個起的li元素 （n為自然數 初值為0 依次+1遞增，n+5表示是 5+0=5 5+1=6 5+2=7 這樣子遞增下去）
ul li:nth-last-child(n)	選中ul父元素中的倒數第n個子元素
ul li:first-of-type	選中ul父元素中類型為li的的第一個元素
	ul li:last-of-type
ul li:nth-of-type(n)	選中ul父元素中類型為li的第n個元素
ul li:nth-last-of-type(n)	選中ul父元素中類型為li的倒數第n個元素

注：nth-child:是不篩選類型的，但是類型你得對得上選擇器才生效

ul li:nth-child(1){background: #009A00;} /*下面有個span所以選到的第一個就是span，但是span和li對不上所以是不生效效果的*/ /*想用:nth-child選中里面的第一li得寫成ul li:nth-child(2)*/<div id="box"><span></span><li></li><li></li><li></li><li></li></div>

注：nth-of-type(n):先篩選類型,再確定第幾個元素

ul li:nth-of-type(1){background: #009A00;} /*過濾掉span后，獲取到第一個li元素*/<div id="box"><span></span><li></li><li></li><li></li><li></li><li></li><li></li></div>

nth-child:結構偽類選擇器詳解：
1.選中ul父元素中的第一個li子元素
ul li:first-child{background: #009A00;}

2.選中ul父元素中的最后一個子元素
ul li:last-child{background: #009A00;}

3.選中ul父元素中的第5個子元素
ul li:nth-child(5){background: #009A00;}

4.選中為奇數下標的li元素
ul li:nth-child(odd){background: #009A00;}

5.選中為偶數下標的li元素
ul li:nth-child(even){background: #009A00;}

6.選中為奇數下標的li元素
ul li:nth-child(2n-1){background: #009A00;}

7.選中為偶數下標的li元素
ul li:nth-child(2n){background: #009A00;}

8.選中ul父元素中的倒數第2個子元素
ul li:nth-last-child(2){background: #009A00;}

9.選中ul父元素中類型為li的的第一個元素
ul li:first-of-type{background: #009A00;}

10.選中ul父元素中類型為li的第5個元素
ul li:nth-of-type(5){background: #009A00;}

CSS2屬性選擇器：

選擇器例子描述

[attr]	[name]	選中有name屬性的元素
[attr=val]	[name=box]	選中有name屬性其值為box并且neme里面屬性值只有box這一個的元素
[attr~=val]	[name~=box]	選中有name屬性并其值是一個詞列表,包含box值的元素

[name]{background: #009A00;} /* 將選中的元素背景設置為綠色 */ <div id="unp"><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li name="box"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果圖:

2.選中有name屬性其值為box并且neme里面屬性值只有box這一個的元素

[name=box]{background: #009A00;} /* 將選中的元素背景設置為綠色 */ <div id="unp"><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li name="box"></li><li name="box erp"></li> /*這個name值有兩個，這個便不會被選中*/<li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果圖：

3.選中有name屬性并其值包含box值的元素

[name~=box]{background: #009A00;}<div id="unp"><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li name="box"></li><li name="box erp"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果圖：

CSS3屬性選擇器：

選擇器例子描述

[attr^=val]	[class^=box]	選中有class屬性并且其值是以box開頭的元素
[attr$=box]	[name$=box]	選中有class屬性并且其值是以box結尾的元素
[attr*=box]	[name*=box]	選中有class屬性并且其值里面有box的元素
CSS3屬性選擇器案例詳解：
1.選中有class屬性并且其值是以box開頭的元素

[class^=box]{background: #009A00;} <div id="unp"><li class="box1"></li><li class="box2"></li><li class="box3"></li><li class="box4"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果圖：

2.選中有class屬性并且其值是以box結尾的元素

[class$=box]{background: #009A00;} <div id="unp"><li class="un-box"></li><li class="un-box"></li><li class="un-box"></li><li class="un-box"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果圖：

3.選中有class屬性并且其值中包含box的元素

[class*=box]{background: #009A00;} <div id="box"><li class="unboxp"></li><li class="unboxp"></li><li class="unboxp"></li><li class="unboxp"></li><li class="unboxp"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li><li class="ure"></li></div>

效果圖：
偽類屬性選擇器：

選擇器例子描述

:disabled	input:disabled{ border: 2px solid red;}	選中禁用狀態下的表單元素
:enabled	input:enabled{ border: 2px solid red;}	選中可用狀態的表單元素
:checked	input:checked{width: 50px;height: 50px;}	選中被選中狀態的單多選框
::selection	input::selection { color: red;}	被選中的元素(一般針對文字

總結

以上是生活随笔為你收集整理的nth-child选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。