目錄

first-child、last-child、nth-child、nth-last-child、nth-of-type

1.first-child

2.margin屬性解釋拓展

2.1.寫一個值

2.2. 寫兩個值

2.3.寫三個值

?2.4.寫四個值? ??

3.回歸正題，看nth-child的使用方法

3.1、li:first-child：? ? ? ?

3.2.li:last-child：? ? ? ? ? ? ?

3.3.li:nth-child(n)：? ? ? ?

3.4.li:nth-child(odd)；li:nth-child(2n+1)? ? ? ?

3.5.?li:nth-child(even)；li:nth-child(2n) 或者li:nth-child(2n+2)?

3.6.循環使用樣式

?3.7.nth-of-type：

?3.8. nth-last-child(n)：?? ? ? ?

3.9.正方向范圍

3.10.負方向范圍

3.11.前后限制范圍

3.12.nth-child的高級用法

first-child、last-child、nth-child、nth-last-child、nth-of-type

first-child，last-child可直接使用，例如? ul? li:first-child，ul li:last-child，

但是其余的選擇都需要在后面加入()，例如ul li:nth-child(n);? ? ->選中ul元素下面第n個li元素，且n是從1開始的，這里和JavaScript中的eq()不同，eq選擇也是從第1個開始的，但是索引值是從0開始

1.first-child

<style>body {font-size: 16px; //給body的所有元素設置字體大小color: #333; //給body的所有元素設置字體顏色}*{padding: 0; //這個里面的(*)表示選中所有元素， 這里給所有元素去除默認的外邊距和內間距margin: 0;}.container {width: 1200px; //設置容器的寬度為1200px；margin: 200px auto 0; //給容器設置外邊距： 上邊距為200px，左右居中，下邊距為0，}li {list-style: none; //去除li標簽默認的圓點樣式，如需要保留可將none改為desc；}.container ul li {margin-bottom: 10px;} </style>

2.margin屬性解釋拓展

此處做一下margin的拓展：margin后面最少可以寫一個值，最多四個，padding和這一樣

2.1.寫一個值

上間距、下間距、左間距、右間距均為這個值

例如：margin: 100px；?

2.2. 寫兩個值

第一個代表上間距和下間距，第二個代表左間距和右間距

例如：margin: 100px? 200px；?

2.3.寫三個值

第一個代表上間距，第二個代表左間距和右間距，第三個代表下間距

例如：margin:? 100px? ?200px? ?300px；

?2.4.寫四個值? ??

第一個代表上間距，第二個代表右間距，第三個代表下間距，第四個代表左間距，按照順時針方向，可簡稱為上右下左

?

3.回歸正題，看nth-child的使用方法

3.1、li:first-child：? ? ? ?

表示選擇的是第一個?

例如

.container ul li:first-child {background: red; }

?

3.2.li:last-child：? ? ? ? ? ? ?

表示選擇的是最后一個

.container ul li:last-child {background: red; }

?

3.3.li:nth-child(n)：? ? ? ?

表示選擇的第n個

例如

.container ul li:nth-child(3) {background: red; }

?3.4.li:nth-child(odd)；li:nth-child(2n+1)? ? ? ?

表示選中的是奇數

例如

.container ul li:nth-child(odd) {background: red; }

?

.container ul li:nth-child(2n+1) {background: red; }

3.5.?li:nth-child(even)；li:nth-child(2n) 或者li:nth-child(2n+2)?

表示選中的是偶數

例如

.container ul li:nth-child(even) {background: red; }

.container ul li:nth-child(2n) {background: red; }

3.6.循環使用樣式

li:nth-child(3n+1)? ? ?

每隔3個使用這個樣式，(3n+1)也可理解為每3個分為一組，這一組中的第一個使用這個樣式

.container ul li:nth-child(3n+1) {background: red; }

3.7.nth-of-type：

只針對同類型的元素進行計算使用

例如

.container ul li:nth-of-type(3n+1) {background: red; }

?這里我們可以看到只是選中了li標簽，并沒有選中p標簽；但是如果使用nth-child()的話，就會從第一個p標簽開始進行匹配，而不是第一個li標簽，此時第一個li標簽成為了第6個，而且如果是p:nth-child(1)的話，樣式也不會生效；此時要寫的是li:nth-child(6)；

.container ul li:nth-child(6) {background: red; }

?

?3.8. nth-last-child(n)：?? ? ? ?

表示選擇的是倒數第n個

.container ul li:nth-last-child(3) {background: red; }

3.9.正方向范圍

li:nth-child(n+3)? ? ? ? 從第3個開始使用這個樣式

.container ul li:nth-child(n+3) {background: red; }

?

3.10.負方向范圍

li:nth-child(-n+3)? ? ? ? 從第3個開始向前面數

.container ul li:nth-child(-n+3) {background: red; }

3.11.前后限制范圍

li:nth-child(n+4):nth-child(-n+8)????????選中第4-8個子元素。使用?nth-child(n+4):nth-child(-n+8)?我們可以選中某一范圍內子元素

.container ul li:nth-child(n+4):nth-child(-n+8) {background: red; }

3.12.nth-child的高級用法

li:nth-child(n+2):nth-child(odd):nth-child(-n+9)? ?選中的子元素是從第2位到第9位，并且只包含奇數位

.container ul li:nth-child(n+2):nth-child(odd):nth-child(-n+9) {background: red; }

3.13.li:nth-last-child(-n+3)：? ? ? ?

表示選擇的最后3個

例如

.container ul li:nth-last-child(-n+3) {background: red; }

關于nth-child()的使用方法就寫到這里了，如果覺得本文寫的不錯的話，請您關注，點贊，評論哦！！！

點擊這里，這是我在CSDN上面的倉庫，不定期的會更新一些小練習，歡迎大家一起交流，學習，點個star哦

總結

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

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